本文共 3483 字，大约阅读时间需要 11 分钟。

1.数据绑定

       
            
   	    
Hello {
  { name }}

同样的，ng-model还可以用来绑定对象的某个属性，从而达到从服务器获取数据，绑定到前端的功能。

   
  
      
      
    
Hello {
  { person.name }}
 
   

2.指令

1. ng-app 指令初始化一个 AngularJS 应用程序，只有包含在该元素下的元素才能识别AngularJS
2. ng-init 指令初始化应用程序数据。
3. ng-model 数据绑定
   示例：

    
   
    
在输入框中尝试输入:
    
姓名: 
    
你输入的为: {
  { firstName }}
   

4. ng-repeat 相当于vue中的v-for，循环遍历

    
   
    
循环对象:
    
  
     
  {
  { x.name + ', ' + x.country }}
    
   

5. ng-click点击事件

   
   
    点我！
    
{
  { count2 }}
   

3.作用域Scope

1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。它是一个对象，有自己的属性和方法
2. 示例：

   
   
    
{
  {carname}}
   

4.根作用域rootScope

1. 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

   
   
    
姓氏为 {
  {lastname}} 家族成员:
    
    
     
{
  {x}} {
  {lastname}}
    
   
注意 $rootScope 在循环对象内外都可以访问。

5.模块module

1. 指定当前模块的值来源于哪个控制器，如上图所示。指定当前控制器绑定的是myApp模块。
2. 模块主要有两个参数，1：name(模块名称，string类型)；2：requires(字符串数组)，requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载

6.控制器controller

1. 指明当前域的值是交由哪个控制器处理获得。当然，控制器也可以有自己的方法(变量和函数)。

   
    名: 
    
    
姓: 
    
    
    
姓名: {
  {fullName()}}
   

2. 嵌套控制器，子控制器可以访问父控制器的作用域。

   
  	
    
  		
     Say hello  	 
    
 {
  { person }} 
   
# 输出结果Say hello{"greeted":"false","name":"Ari Lerner"}

7.过滤器 |

1. 常见的5种过滤器

过滤器	描述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

2. 使用方法
   可以使用一个管道字符（|）添加到表达式和指令中。

   
   
    
输入过滤:
    
    
  
     
    {
  { (x.name | uppercase) + ', ' + x.country }}  
    
   
#namesController.jsangular.module('myApp', []).controller('namesCtrl', function($scope) {    $scope.names = [        {name:'Jani',country:'Norway'},        {name:'Hege',country:'Sweden'},        {name:'Kai',country:'Denmark'}    ];});

8.自定义过滤器

  
       
   
    {
  {name | firstUpper}}
   
  

9.服务service

1. 服务是angular内置的函数或对象，个人觉得是对javaScript的一些常用功能的封装
2. 具体用法格式：

var app = angular.module('myApp', []);app.controller('yourController', function($scope, '服务名') {});

3. $location服务

   
   
    
 当前页面的url:
    
{
  {myUrl}}
   
该实例使用了内建的 $location 服务获取当前页面的 URL。

4. $http服务

   
   
 
    
欢迎信息:
    
{
  {data}}
   
 $http 服务向服务器请求信息，返回的值放入变量 "data" 中。

5. 自定义服务

   
   
    
255 的16进制是:
    
{
  {hex}}
   
自定义服务，用于转换16进制数：

10.select选择框

1. //TODO没搞清楚这个ng-model绑定的b到底是怎么来的，为什么会凭空出现一个b，他绑定的到底是那里的值？
2. 经过测试,发现ng-model取名是什么都没关系，估计它绑定的是ng-options中for循环遍历的每一个对象。

   
   
    
选择网站:
    
    
你选择的是: {
  {b.a}}
    
网址为: {
  {b.url}}
   
该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。

11.表格

   
   
 
    
  ---序号    
       
      
            
{
  { $index + 1 }}
       
{
  { x.Name }}
           
{
  { x.Country | uppercase }}
        
     
    
   

12.表单

   
   
  
    
         First Name:
     
    
     
     
    Last Name:
     
    
         
     
     
    
     RESET  
    
  
    
form = {
  {user }}
  
    
master = {
  {master}}
   

13.依赖注入核心组件

1. value

  
       
   
    
        
    
hex值是：{
  {hex()}}
  
   
  

2. service
3. factory

  
       
   
    
        
    
hex值是：{
  {hex()}}
  
   
  

4. provider
5. constant
   详细说明见：

14.AngularJs路由

   
   
           
   
     
    
        
     Home      
     About    
    
      
        
    
    
    
  
   

1. routerParams
   

15. 自定义指令

1. 通过AngularJS模块API中的.directive()方法，传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，函数返回一个对象。

   
 
   
#自定义指令集angular.module('myApp', []) .directive('myDirective', function() {  return {   //告诉AngularJS这个指令在DOM中可以何种形式被声明 默认是是A 以属性的形  式进行声明  //E（元素） 
     //A（属性，默认值） 
   
  //C（类名） 
   
   //M（注释） <--directive:my-directive expression-->   restrict: 'EAC',   //创建自己的scope域，隔离其他的域   replace: true,    template: '{
  {myText}}'    };  });

2. 自定义指令的scope

    Their URL field:  //绑定数据theirUrl    
   
  

转载地址：http://dcqof.baihongyu.com/