AngularJS基础

系统管理员 2022-05-21 04:50 155阅读 0赞

angular源码分析：angular的源代码目录结构说明 http://www.cnblogs.com/web2-developer/p/angular-4.html

Github: https://github.com/angular

AngularJS 教程：www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 通过 ng-directives 扩展了 HTML。

什么是 AngularJS？  
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。  
• AngularJS 把应用程序数据绑定到 HTML 元素。  
• AngularJS 可以克隆和重复 HTML 元素。  
• AngularJS 可以隐藏和显示 HTML 元素。  
• AngularJS 可以在 HTML 元素"背后"添加代码。  
• AngularJS 支持输入验证。  
  
AngularJS 表达式  
AngularJS 表达式写在双大括号内：\{ \{ expression \}\}。  
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。  
AngularJS 将在表达式书写的位置"输出"数据。  
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。  
实例 \{ \{ 5 + 5 \}\} 或 \{ \{ firstName + " " + lastName \}\}  
  
AngularJS 应用  
AngularJS 模块（Module） 定义了 AngularJS 应用。  
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。  
ng-app指令定义了应用, ng-controller 定义了控制器。  
  
AngularJS 表达式 与 JavaScript 表达式  
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。  
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。  
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

创建模块：  
    var app = angular.module("myApp", []);
    
    创建控制器：
    app.controller("myCtrl", function($scope) {
        $scope.firstName = "John";
    });
    
    创建自定义的指令：
    app.directive("runoobDirective", function() {
        return {
            template : "我在指令构造器中创建!"
        };
    });
    
    创建自定义过滤器：
    app.filter('reverse', function() { //可以注入依赖 
    	return function(text) { 
    		return text.split("").reverse().join(""); 
    	} 
    });
    
    创建自定义服务：
    略