angular学习记录

angular

1. 新建组件

ng generate component heroes

同理还能新建服务

ng generate serve heroes

2. 父传子
   //父

   <child [data]='data'></child>

   //子

   import {Input } from '@angular/core';
   export class ChildComponent implements OnInit{
       @OnInit() data;
       @OnInit(values) data;//取别名，不推荐使用
   }

3. 创建路由文件

   ng generate module app-routing --flat --module=ap

   • –flat 把这个文件放进 src/app 中，而不是单单的目录文件
   • –module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

4. 给当前模板 html（没设置跟标签），跟标签绑定类

   import {  HostBinding } from "@angular/core";
      @HostBinding("class") get themeClass() {
     return "theme-light";
   }

   css
   不能直接使用.theme-light 定义样式，但是可以使用:host-context()判断当前根组件是否具有该类

   :host-context(.theme-light) h2 {
    background-color: #eef;
   }

angularjs 构建项目

安装工具

npm install --global yo bower grunt-cli

安装 AngularJS 的生成器

npm install -g generator-webapp
//或
 npm install --global generator-angular

搭建项目

//搭建angularjs项目
yo angular
//搭建webapp
yo webapp

我使用 angular

然后选择要安装的模块，我按照默认的来的
然后安装依赖

npm install
bower install

bower 是个坑，官方文档没提这个，所以直接运行后，浏览器提示angular is not defined

然后运行

grunt serve

如果选的是 gulp(运行会报错，没找到原因，还是用 grunt)

gulp serve