美文网首页我爱编程
Angular相关知识点

Angular相关知识点

作者: ningluo | 来源:发表于2017-06-15 21:05 被阅读0次

    AngularJs是一个 mvvm框架,可通过<script></script>标签绑定到html

    angular可以构建一个单一页面应用程序(SPA:single  Page Applications)

    Angular指令

    ng-app  定义一个AngularJs应用程序

    ng-model  数据的双向绑定

    ng-bind 数据的单向绑定

    ng-init指令初始化应用程序数据

    ng-repeart指令对于集合中(数组中)的俄每个项会克隆一次html元素

    ng-class设置样式

    ng-controller创建一个控制器

    ng-if显示隐藏

    ng-show显示

    ng-hide隐藏

    ng-repeat遍历添加对应内容

    ng-repeat-start开始循环

    ng-repeat-end结束循环

    track  by $index定义

    $rootScope和$scope的区别:

    $rootscope相当于全局变量

    定义的$rootscope在其他控制器coontroller里可以访问,而$scope只能访问当前的controller

    $watcher 监听

    $digest  脏值检查  遍历

    $apply()方法  可以触发$digest循环

    Angular过滤器

    改变显示方法

    1.|currency(保留小数点后两位)

        |currency:“¥”(显示人名币)

    2.过滤日期

    |data   日期过滤    May  11.  2017

    |data:"yyyy-MM-dd"   年月日

    |data:“shortDate”    月/日/年

    ||data:"yyyy-MM-dd HH:mm:ss"年-月-日时:分:秒

    3.过滤数组

    |Filter搜索效果

    4.过滤json

    |json数据显示json格式

    5.过滤limitTo数组或字符串

    |limitTo:3截取数组前3项

    6.|lowercase全部小写aBcDe--->abcde

    7.|number如果字符串里边含有非数字的,则返回空串

    |number:3保留三位小数

    8.|orderBy:参数是字符窜,

    9.|upercase全部大写aBcDe--->ABCDE

    什么是angular?

    angularjs是为了克服html在构建应用上的不足而设计的

    是一个动态web应用设计的结构框架,能使用html作为模板语言,通过扩展html语法,让你能更清楚,简洁的构建应用组件

    核心:依赖注入     数据双向绑定   

    Angular.js中ng-if、ng-show和ng-hide的区别介绍

    ng-show,ng-hide和ng-if的区别介绍

    ng-sjow,ng-hide通过修改css样式控制元素的显示隐藏

    ng-if根据自己的表达式的值动态的在当前页面中添加删除页面元素

    angular路由:

    1、载入了实现路由的 js 文件:angular-route.js。

    2、包含了 ngRoute 模块作为主应用模块的依赖模块。

          angular.module('routingDemoApp',['ngRoute'])

    3、使用 ngView 指令。

         该 div 内的 HTML 内容会根据路由的变化而变化。

    4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

          module.config(['$routeProvider', function($routeProvider){

          $routeProvider

          .when('/',{template:'这是首页页面'})

    .when('/computers',{template:'这是电脑分类页面'})

    .when('/printers',{template:'这是打印机页面'})

    .otherwise({redirectTo:'/'});

    }]);

    相关文章

      网友评论

        本文标题:Angular相关知识点

        本文链接:https://www.haomeiwen.com/subject/dvmuqxtx.html