微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

angularJS 入门基础

分类：JavaScript作者：编程之家

angular 　　

所有用到的库,全部用的CDN：

代码如下:
>

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

代码如下:
"> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
heading"> angular最强大的东西,数据的绑定binding
{{data}}

通过angular,展示数组对应的数据;.

代码如下:
"> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
heading"> 通过angular,展示数组对应的数据;
.s{ color:#f00; } li{ cursor: pointer; }

.数据过滤器的DEMO：

代码如下:
"> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
heading"> 数据过滤器;
{{sourCode | up}}

.factory工厂,$provider,service等等都是一样样的,不要感觉很难,其实就是看出一个数据模型或者实例就好了;：

代码如下:
"> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
heading"> angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
app.factory("ff",function() { return { "noting" : "json" }; }); app.controller("factory",function($scope,ff) { $scope.json = ff; });
do you content for?

.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先):：

代码如下:
"> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
heading"> ng-switch的使用
  • other

    • ng-src和ng-href;

    代码如下:
    "> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
    heading"> ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)

    如何操作页面的样式,这个直接改绑定的数据模型就好了：

    代码如下:
    heading"> angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)

    angular中的模板如何使用,这个要配合路由器使用比较叼:

    代码如下:
    "> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
    heading"> 使用模板

    如何使用$scope.$watch实时改变绑定界面的模板:

    代码如下:
    "> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
    heading"> angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;
    > {{wat}}

    angular中自己定义的工具方法

    代码如下:
    "> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
    heading"> angular中的工具方法列表

    ng-transclude的使用(这个是官方的案例)，代码如下:

    代码如下:
    "> "> angular 　　<Meta http-equiv="X-UA-Compatible" content="IE=edge,[]);
    heading"> ng-transclude的使用(这个是官方的案例):