fork on github

AngularJs核心特性 #

为什么用angular #

AngularJs的使用 #

初识ng-model #

表达式 #

数据绑定 #

ng-init #

data-指令 #

ng-repeat遍历 #

ng-click #

ng-hide/ng-show/ng-if #

ng-switch # 

<input type="text" ng-model="name">
<div ng-switch="name">
    <p ng-switch-when="by">123</p>
    <p ng-switch-when="hello">456</p>
    <p ng-switch-when="girl">789</p>
    <p ng-switch-default>10000</p>
</div>

增加class值 #

引入页面 #

currency 货币过滤器 # 

{{100 | currency:'￡' }}

lowercase & uppercase 大小写转换过滤器 # 

{{'abc' | uppercase }}

{{'ABC' | lowercase }}

limitTo 限制位数 # 

{{123456 | limitTo:5}}

number 数字过滤器 # 

{{1234.2345|number:2}}

json 对象过滤器 # 

<pre>
{{{aa:123,bb:456} | json}}
</pre>

date 日期过滤器 # 

{{1654325689063 | date:'yyyy-MM-dd hh:mm:ss'}}

orderBy # 

    <div ng-repeat="p in phones | orderBy:'-age':'reverse'">
        {{p.name}}
    </div>

filter 查询过滤器 # 

<div ng-repeat="p in phones | filter:{age:query}">
    {{p.name}}
</div>

angular工具方法 #

angular.uppercase&&angular.lowercase # 

var abc = angular.uppercase("aaaa");
console.log(abc);
var abc = angular.lowercase("aaaa");
console.log(abc);

angular.equals # 

var a = angular.equals(NaN,NaN);
console.log(a);

angular.extend # 

var obj = {a:123},obj1 = {b:456};
angular.extend(obj,obj1);
console.log(obj);

angular.fromJson&&angular.toJson # 

var obj = '{"aa":123,"bb":456}';
var a =angular.fromJson(obj);
a = angular.toJson(a);
console.log(a);

angular.copy # 

var obj = {a:123},obj1 = {b:456};
angular.copy(obj,obj1);
console.log(obj1);

angular.forEach # 

var arr = [{name:1},{name:2},{name:3}];
var result = [];
angular.forEach(arr,function (item) {
    this.push(item.name);
},result);

angular.bind # 

var obj = {name:2};
function arr(who){console.log(this.name+who);}
var newArr =  angular.bind(obj,arr,1);
newArr();

AngularJs MVC #

模块化(解决污染全局命名空间) #

控制器 #

$scope和$rootScope #

$watch&&$apply #

ng-href #

##ng-src

<img ng-src="{{imgSrc}}"/>
var app = angular.module('appModule',[]);
    app.controller('appCtrl',function ($scope,$timeout) {
        $timeout(function() {
            $scope.imgSrc = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png';
        }, 1000);
    })

当鼠标离开时改变model的变化 #

angular中的事件 #

event 事件的监听机制 #

input相关指令 #

ng-readonly #

通过表达式返回值true/false将表单输入字段设为只读。 # 

<input type="text" ng-readonly="stop" value="3秒后禁用"/>
.run(function($rootScope,$timeout){
    $rootScope.stop=false;
    $timeout(function(){
        $rootScope.stop = true;
    },3000)
})

ng-checked&ng-selected&ng-value #

模块之间如何依赖 #

启动多个ng-app #

$http 服务 #

$http中get&post #

$http jsonp # 

$http.jsonp('/ajax3').success(function (data,status,headers,config) {
     $scope.data = data;
})
angular.callbacks._0([{name:1}]);

过滤器 #

创建指令 #

template 定义替换模板 #

restrict #

scope #

link:在指令中操作DOM #

angular验证 #

创建服务组件 #

provider # 

app.config(function (myProvider) {
        myProvider.setCurrency = '%';
    });
    app.provider('my', function () {
        this.setCurrency = '$';
        this.$get = function () {
            var that  =this;
            return {
                minus: function (a,b) {
                    return  that.setCurrency +(a-b)
                }
            }
        };
    });

factory #

service #

constant #

value # 

app.constant('my',{
        set: function () {
            return 1
        },
        get: function () {
            return 2
        }
    });

restful #

ngResource #

ngRoute # 

app.config(function ($routeProvider) {
    $routeProvider.when('/',{
        templateUrl:'./tmpl/home.html',
        controller:'HomeCtrl'
    }).when('/user',{
        templateUrl:'./tmpl/next.html',
        controller:'HomeCtrl'
    }).otherwise({
        redirectTo:'/'
    })
});