AngularJs入门系列

AngularJs新建项目

配置环境：

1.首先我们安装nodejs,（百度NodeJs即可）

2.安装完成后测试：

node -v,npm-v

若npm-v报错：打开你的安装路径

修改npmrc文件中的路径改为你的npm的 路径

3.安装cli ： npm install -g @angular/cli

4.安装完成后测试 ng -v验证是否安装成功，可能出现ng不是命令错误，将ng的目录配置在环境变量path中即可。

5.下载WebStorm

HelloWorld项目：

命令行进入工作区间，ng new 项目名称 比如 ng new HelloWordDemo，项目目录结构如下

2.引用插件库，比如我们使用jquery 命令行进入工作区间：

执行npm install jquery --save，

第三方插件下载自动下载到node_modules中，在.angular-cli.json中

引用你的第三方插件如图所示：

3.组件：新建组件模块

按照自己的项目设计，比如需要新建header部分执行命令：ng g component header

,在app.component.html中引用组件完成框架的搭建如图所示：

在生成的组件中编写各部分的代码即可。

AngularJs之路由配置（一）

1.我们可新建一个路由项目

ng new 项目名称 --routing

我们可以看到路由项目有app-routing.modules.ts

路由配置中主要有五个参数：

我们新建好home组件后在app-routing.modules.ts中配置路路径

如上图所示意思就是启动项目后比如localhost:8008/ 根据

知道跳转到home路径由

配置可以看出home路径下展示的是homeComponent所示当我们访问localhost:8008/ 时看到的页面就是home组件上的内容，我们可以使用这种方式然后在页面中使用[routeLink]进行跳转

3. 子路由

很多时候我们也需要使用子路由比如/product/路径下有商品详情页面

我们需要在父路由的内部来定义域children路由标签即可。

4.路由是单页面应用的基础，比如header标签内容不变，我们需要点击主页或者商品详情替换路由的内容，我们需要指定路由内容的位置比如现在点击商品详情实现路由的跳转，我们需要在页面中使用

AngularJs之路由配置（二）

1.参数订阅

我们使用

商品详情

跳转到product页面获取参数的值，我们需要使用参数订阅。

在procuct ts中private productid:number;

声明一个number的变量

在oninit（）中使用参数订阅：

我们就可以在html页面使用差值表达式获取参数的值商品id：{}

2.监听事件跳转路由

很多时候我们需要使用按钮跳转，当然在按钮中我们同样可以使用 [routerLink]进行跳转

如果使用onclick的话 可以使用

(click)="xinxi()" xinxi是方法名在对应的ts中

若要传参则：

最后，使用参数订阅和监听事件跳转路由需要声明

AngualrJS Ioc控制反转提供器入门

以获取商品信息为例

1.创建商品服务:

ng g service 服务名称

同样的在服务ts中声明商品类

2.声明一个Product类型的方法在这个方法中获取商品信息

3.在app.module中声明这个提供器

4.在需要使用的组件中

欢迎关注技术公众号，微信号搜索ColorfulCode 代码男人。分享技术文章，投稿分享，不限技术种类，不限技术深度，让更多人因为分享而受益。