AngularJS基础

• 控制器控制Angularjs应用程序的数据。

• 控制器是常规的javascript对象。

一般放在外部文件中， 通过src引用。

过滤器：

• 可以用来格式化数据，能够用在表达式和指令中。

• 使用一个管道字符 | 添加到表达式和指令中。

currency:格式化数字为货币格式。

filter:从数组项中选择一个子集。

lowercase:格式化字符串为小写。

orderBy:根据某个表达式排列数组。

uppercase:格式字符串为大写。

服务（service):

服务是一个函数或对象。

你可以创建自己的服务，或使用内建服务。

angularjs内建了30多个服务。

$location：

返回当前页面的URL地址。

var app=angular.module(‘myapp‘,[]);
app.controller(‘customersCtrl‘,function($scope,$location){
  $scope.myUrl=$location.absUrl();
});

$http:

服务向服务器发送请求，应用响应服务器传送过来的数据。

var app=angular.module(‘myapp‘,[]);
app.controller(‘myCtrl‘,function($scope,$http){
  $http.get("welcome.htm").then(function(response){
    $scope.myWelcome=response.data;
  })
});

$timeout:

定时器

var app=angular.module(‘myapp‘,[]);
app.controller(‘myCtrl‘,function($scope,$timeout){
  $scope.myheader="hello world";
  $timeout(function(){
    $scope.myheader="how are you today"
  },2000);
});

自定义服务：

app.service(‘hexafy‘,function(){
  this.myFunc=function(x){
    return x.toString(16);
  }
});
?
app.controller(‘myCtrl‘,function($scope,hexafy){
  $scope.hex=hexafy.myFunc(255);
});

Select(选择框)：

下拉列表选项，使用ng-options,而不是ng-repeat.

当数据源是对象时，ng-options更加灵活。ng-options下拉框选择的是一个对象，ng-repeat下拉选择的是一个字符串。

ng-repeat: x in 数组.

ng-options：x for x in 数组.

表格：

ng-repeat指令可以完美的显示表格。

?

  
    
    
  


{{x.Name}}
{{x.country}}



?

?
 
 
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所依赖的其他模块。
 
 
 
 
AngularJS基础
标签：容器   下拉框   lib   body   允许   gap   加载速度   try   other   
原文地址：https://www.cnblogs.com/l12138h/p/14648519.html