Angular基础学习一

创建项目

第一种:ng new 项目名

第二种:ng new 项目名 --skip-install

进入到项目目录:cnpm install

这种方式要比第一种速度快很多,用cnpm的方式安装。


运行项目

ng serve  正常启动,http://localhost:4200/

ng serve --open 启动并在浏览器里打开项目

ng serve --port 4201 指定端口运行项目


组件

创建组件:ng g component components/header

使用组件:<header></header>,引入selector中对应的名字


服务

创建服务:ng g service services/storage

使用服务
            app.module.ts 里面引入创建的服务
                import { StorageService } from './services/storage.service';
            NgModule 里面的 providers 里面依赖注入服务
                providers: [StorageService],
            构造方法中声明
            constructor(public firstService:FirstServiceService) { }

    通过firstService就可以使用服务了   


 

 

路由

在routing文件中进行配置,一个路由对应了一个组件

Routes = [{ path:"",component: TestComponent ];

html文件中使用routerLink应用路由


模块

ng g module modules/user --routing    
加载模块:
    1.现在app-routing.module根组件中 加入路由
        Routes = [
            { path : "user",loadChildren: "./module/user/user.module#UserModule" } ]  ,这样就完成了模块的添加。

    2.配置加入模块的 module文件

模块会有两个文件,一个是module.ts文件,在这里引入要用到的组件,declarations: [TestComponent]

一个是routing文件,在这里配置该模块的路由。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章