Angular的学习

脚手架文件说明:

e2e文件：自动化配置文件及用例demo

app.component.css：根组件样式

app.component.html：根组件页面

app.component.spec.ts：测试用例的例子

app.component.ts：根组件

app.module.ts：根模块

assets文件夹:静态文件目录,图片,第三方库等

environments文件夹:开发模式和生产模式的配置文件,接口的根路径

index.html:启动页

main.js:入口文件

polyfills.ts:兼容,很全,可以兼容E10和es6&7的语法

styles.css:全局样式

test.ts:测试用例

tsconfig.app.json tsconfig.spec.json:typescript配置文件

typings.d.ts:全局声明文件

.angular-cli.json:脚手架的核心配置文件

.editorconfig:editorconfig配置文件,规范开发用

.gitignore:git忽略文件

karma.conf.js:karma配置文件

package.json:项目依赖配置文件

protractor.conf.js:测试的配置文件

README.md:官方说明文件

tsconfig.json:typescript的配置文件

tslint.json:tslint语法校验配置文件

angular的学习

1,angular的介绍

angular是一款来自谷歌的开源的web前端框架,诞生于2009年,是优秀的前端js框架,Google的多款产品都使用了这个框架

它是一套用于构建用户界面的JS框架,主要用于开发单页面应用程序

2,angular的特点

是基于TypeScript和react,vue相比,更适合中大型企业项目

3,angular.js模块

ng angular.js的默认模块,包含angular.js的所有核心组件

ngRoute angular.js的路由模块

ngAnimate angular的动画模块

ngAria 可为指令注入共同的可达性属性和提高残疾人用户体验

ngResource 查询和发送数据到REST服务器时

ngCookies 提供方便的包用于读取和写入浏览器的cookies

ngTouch 提供触摸事件

ngSanitize 可解析操作HTML数据

ngMessage 表单验证模块,简化开发流程

4,angular的指令

ng-app 指定自定义模块的名称

ng-controller 指定控制器的名称

ng-model 双向数据绑定

ng-init 初始化数据

ng-bind 绑定数据

ng-click 添加点击事件

ng-repeat 遍历数组对象

<script src="js/angularjs.js"></script>
简单算法小案例
<div ng-app="myapp" ng-controller="myController">
  x:<input ng-model="X"><br>
  y:<input ng-model="Y"><br>
  <button ng-click="add()">运算</button>
  结果:{{Z}}
</div>
<script>
  //定义模块myapp
  var app=angular.module('myapp',[]);
  //定义myController控制器(控制模块范围)
  app.controller('myController',function ($scope) {
    $scope.add=function () {
      $scope.Z=parseInt($scope.X)+parseInt($scope.Y)
    }
  })
</script>

<script src="js/angularjs.js"></script>
遍历数组

<table border="1">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>薪水</td>
  </tr>
  <tr ng-repeat="item in list">
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>{{item.saylary}}</td>
  </tr>
</table>
</div>
<script>
  var app=angular.module('myapp',[]);
  app.controller('myController',function ($scope) {
    // $scope.list=[12,11,1,2,44,'haha']
    $scope.list=[{
      name:'张三',
      age:23,
      saylary:200
    },{
      name:'李四',
      age:63,
      saylary:2000
    }]
  })
</script>