AngularJS基础

AngularJS教程

• 一款优秀的前端JS框架。

• 通过新的属性和表达式扩展了HTML。

• 可以构建一个单一页应用程序。

• 学习起来非常简单。

AngularJS简介

• 是一个javascript框架。他可以通过

  HTML DOM：

  angularjs为HTML DOM元素的属性提供了绑定应用数据的指令。

  angularjs有自己的HTML属性指令。

  ng-disabled

  ng-show

   

   

  事件：

  ng-click

  ng-hide

   

   

  模块：

  模块是应用控制器的容器。

  控制器通常属于一个模块。

  模块定义了一个应用程序。

  模块是应用程序中不同部分的容器。

   

  在模块定义中[]参数用于定义模块的依赖关系。

  中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

   

  javascript中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

  angularjs模块让所有导函数的作用域在改模块下，避免了该问题。

   

  angularjs在元素中被加载，因为对angularjs.module的调用只能在库加载完成后才能调用。

  另一个解决方法是在元素中加载angularjs库，但是必须放置在你的angularjs脚本前。

   

   

  angulajs输入验证：

  angularjs表单和控件提供了验证功能，对用户的输入进行判断，以辨别输入是否合法，否则进行警告。

  但是，客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

   

   

  API：Application Programming Interface(应用程序编程接口)。

   

   

  Include(包含):

  你可以在HTML中包含HTML文件。

  
  ?
  
    
  
    
  
  
  ?
  

  依赖注入

  是angularjs的重要特性之一，它简化了angular解析模块/组件之间的依赖过程。

  什么是依赖注入：（Dependency injection),简称DI，是一种软件设计模式，在这种模式下，一个或更多个依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了改客户端状态的一部分。

  该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到一例埃。

  一句话：没事你不要来找我，有事我会去找你。

  五个核心组件用来作为依赖注入：

  • value

  • factory

  • service

  • provider

  • constant

   

   

  angularjs路由

  angularjs路由允许我们通过不同的url访问不同的内容。

  通过angularjs可以实现多视图的单页web应用（single page web application,SPA)。

  通常我们的URL形式为：http://w3cschool.cn/fifdt/page,但在单页WEB应用中angularjs通过#+标记实现：

  http://w3cschool.cn/#/first
  http://w3cschool.cn/#/second
  http://w3cschool.cn/#/third

  当我们点击以上任意一个链接时，向服务端请的地址都是一样的（http://w3cschool.cn/)。因为#号之后的内容在向服务器请求时会被浏览器忽略掉。所以我们就需要在客户端实现#号后面内容的功能实现。angularjs路由就通过#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

   

  实例解析：

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

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

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

  3.使用ngView指令

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

  4.配置$routeProvide，angularjs $routeProvider用来定义路由规则。

  module.config(['$routeProvider',function($routeProvider){
    $routeProvider
      .when('/',{template:'这是首页页面'})
      .when('/computer',{template:'这是电脑分类页面'})
      .when('/printers',{template:'这是打印机页面'})
      .otherwise({redirecTo:'/'})
  }]);

  angularjs模块的config函数用于配置路由规则。通过使用configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

  $routeProvider为我们提供了when(path,object)&otherwise(object)函数按顺序定义所有路由，函数包含两个参数。

  • 第一个参数是URL或者URL正则规则。

  • 第二个参数是路由配置对象。

   

  路由设置对象

  $roouteProvider.when(url,{
    templte:string,
    templteUrl:string
    controller:string,function 或 array,
    controllerAs:string,
    redirectTo:string,function,
    resolve:object
  });
  ?
  参数说明：
  - template:
    如果我们只需要ng-view中插入简单的HTML内容，则使用该参数：
    .when('/computer',{tempalte:'这是电脑分类页面'})
  - templateUrl:
    如果我们只需要在ng-view中插入HTML模板文件，则使用该参数：
    $routeProvider.when('/computer',{
      templateUrl:'views/computers.html',
    });
  - controller:
    function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
  - controllerAs:
    string类型，为controller指定别名。
  - redirectTo:
    重定向的地址。
  - resolve:
    指定当前controller所依赖的其他模块。