初识

directive 指令

  1. ng-app 初始化一个AngularJs应用程序（通过一个值（比如 ng-app="myModule"）连接到代码模块。）

  2. ng-init 初始化应用程序数据（一般不用）

  3. ng-model 把元素值绑定到应用程序（mvvm的双向绑定）

  4. ng-bind 将应用程序数据绑定到html视图

  5. 表达式 {{}} 功能类似 ng-bind，但更广泛的用途

     	<!DOCTYPE html>
    
 <html lang="zh-cn">
    
 <head>
    
 <meta charset="utf-8">
    
 <script src="angular.min.js"></script>
    
 </head>
    
 <body>
    
 <div ng-app="" ng-init="firstName='John'">

 <p>在输入框中尝试输入:</p>
    
 <p>姓名: <input type="text" ng-model="firstName"></p>
    
 <p>你输入的为: {{ firstName }}</p>
    
 <p>你输入的为: <span ng-bind="firstName"></span></p>
    
 </div>
    
 </body>
    
 </html>

  6. ng-repeat 重复一个html元素（循环）

  7. 自定义指令

      mainApp.directive('focus', function () {
    
    return {
    
      link: function (scope, element, attrs) {
    
        element[0].focus();
    
      }
    
    };
    
  });

  8. 其他常用指令

    ng-show,ng-hide,ng-class,ng-view,ng-switch, ng-if, ng-options,ng-disabled,ng-click,ng-include="''"(需要引号，跨域要设置白名单)

表单验证

状态信息

    <form ng-app="" name="myForm">

        Email:

        <input type="email" name="myAddress" ng-model="text">

        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

    </form>

    <p>提示信息会在 ng-show 属性返回 true 的情况下显示。</p>

样式切换

ng-model 指令根据表单域的状态添加/移除以下类

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

作用域scope

$scope.$watch('passw1',function() {$scope.test();});

过滤器filter

  1. uppercase，lowercase 大小写转换

     {{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
    
 {{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

  2. date 格式化

     {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

  3. number 格式化（保留小数）

     {{149016.1945000 | number:2}}

  4. currency货币格式化

     {{ 250 | currency }}            // 结果：$250.00
    
 {{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

  5. limitTo 截取

     {{"1234567890" | limitTo :6}} // 从前面开始截取6位
    
 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位

  6. 查找、排序、自定义过滤

     <body ng-app="myApp">
    
 <div ng-controller="myCtrl">
    
 	<div ng-bind="myName  | uppercase"></div> <!--uppercase转换成大写-->
    
 	<div class="" ng-bind="money | currency : '￥'"> </div><!--currency 过滤器将数字格式化为货币格式-->
    
 	<div class="" ng-repeat="v in city | orderBy:'id'">
    
 		<p ng-bind="v.name"></p>
    
 	</div><!--orderBy 过滤器根据表达式排列数组-->

 	<div class="" ng-repeat="v in city | orderBy:'-id' | filter : '上海'">
    
 		<p ng-bind="v.name" style="color:red;"></p>
    
 	</div>
    
 	<!--orderBy 过滤器根据表达式排列数组   默认正序asc,倒序添加-负号-->
    
 	<!--filter 过滤器根据表达式过滤不包含过滤器中的内容-->

 	<!--自定义过滤器aa-->
    
 	<div class="" ng-bind="myName | reverse" style="color:blue;"></div>
    
     <div class="" ng-bind="myName | reverse:true" style="color:blue;"></div>
    
 </div>
    
 <script>
    
 angular.module('myApp',[]).controller('myCtrl',function($scope){
    
 	$scope.myName="Dhx";
    
 	$scope.money=100;
    
 	$scope.city=[
    
 		{"id":"1","name":"福建"},
    
 		{"id":"2","name":"广东"},
    
 		{"id":"5","name":"上海"},
    
 		{"id":"4","name":"北京"},
    
 		{"id":"3","name":"四川"}
    
 	]
    
 }).filter('reverse',function(){
    
 	return function(input, uppercase){
    
                      input = input || '';
    
                      var out = input.split("").reverse().join("");
    
                      if (uppercase) {
    
                      out = out.toUpperCase();
    
                      }
    
 	     return out;
    
 	}
    
 })
    
 </script>
    
 </body>

服务Service

$location ，$http(不能跨域) , $timeout, $interval

用provider自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.provider('CalcService', function() {

	this.$get = function() {

		var factory = {};  

		factory.square = function(a) {

			return a * a;

		}

		return factory;

	};

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.factory('CalcService', function() {

			var factory = {};  

			factory.square = function(a) {

				return a * a;

			}

			return factory;

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(3)

var mainApp = angular.module('mainApp', []);

mainApp.config(function($provide) {

	$provide.factory('CalcService', function() {

		return function(a) {

			return a * a;

		};

	});

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

用factory自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.factory('CalcService', function() {

	var factory ={};

	factory.square = function(a) {

		return a * a;

	}

	return factory;

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.factory('CalcService', function() {

		return function(a) {

			return a * a;

		}

	});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

用service自定义一个服务

(1)

var mainApp = angular.module('mainApp', []);

mainApp.service('CalcService', function(){

	this.square = function(a) {

		return a * a;

	}

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService.square($scope.number);

	}

 });

(2)

var mainApp = angular.module('mainApp', []);

mainApp.service('CalcService', function(){

	return function(a) {

		return a * a;

	}

});

mainApp.controller('MainCtrl', function ($scope,CalcService) {

	$scope.square = function() {

		$scope.result = CalcService($scope.number);

	}

 });

依赖注入

value，factory，service，provider，constant

select



Api

  • angular.lowercase(a) 转换字符串为小写
  • angular.uppercase(a) 转换字符串为大写
  • angular.isString(a) 判断给定的对象是否为字符串，如果是返回 true。
  • angular.isNumber(a) 判断给定的对象是否为数字，如果是返回 true。
  • angular.isFunction(a)
  • angular.extend(a,b) 从b对象复制所有属性和函数到a.
  • angular.copy(a),angular(a,b) 拷贝一个副本
  • angular.isObject(a)
  • angular.isArray(a)
  • angular.forEach(object,function(value,key){}); angular.forEach(myArray,function(value,index){})
  • angular.isDefined(a)
  • angular.isUndefined(a)

路由

http://runoob.com/#/first

http://runoob.com/#/second

对服务器而言它们是同一个链接，AngularJS路由就通过“ # + 标记”帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

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

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

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

  3. 使用 ngView 指令。

     <div ng-view></div>//该 div 内的 HTML 内容会根据路由的变化而变化。

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

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

$routeProvider.when

$routeProvider.when(url, {

	template: string,

	templateUrl: string,

	controller: string, function 或 array,

	controllerAs: string,

	redirectTo: string, function,

	resolve: object<key, function>

});

  • template:如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  • templateUrl: 如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

    $routeProvider.when('/computers', {

    templateUrl: 'views/computers.html',

    });

  • controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

  • controllerAs: string类型，为controller指定别名。

  • redirectTo: 重定向的地址。

  • resolve: 指定当前controller所依赖的其他模块。

猜测（待确认）：

  1. 一个应用可以有多个模块，但在页面上只能有一个ng-app指令，一个模块可以有多个controller
  2. 如果html是视图，JavaScript代码中应该有一个自动构建的对应的viewModel
  3. 每个controller对应着一个scope。controller与controller之间相关隔离，通过rootScope共享数据。

    通过在controller中修改scope，也就在修改viewModel，进而也就修改了view,因为view和viewModel是自动同步的，
  4. $XX代表这是一个应用对象，如$scope, $rootScope，$valid，$dirty，$touched，$error等， $符号不能缺失

笔记 （待整理）

  1. var todoApp = angular.module("todoApp",[]);其中第二个参数是一个由所依赖模块构成的数组，换言之在应用中是可以存在多个模块的。

    1. var todoApp = angular.module("todoApp");则是查找已定义的模块todoApp

  2. 浏览器插件batarang

  3. todoApp.run(function($http){$http.get("todo.json").then(function(data){model.items=data;})});run方法会在AngularJs执行完初始化设置后允许一次。

  4. AngularJs自带一个裁剪版的jQuery，叫做jqLite,而如果页面中引入了jQuery,AngularJs会自动检测到并优先使用jQuery代替jqLite。

  5. 规则

    1. 视图逻辑仅为显示准备数据，永远不应该修改模型。
    2. 控制器逻辑永远都不应该直接增删改模型中的数据。
    3. 客户端永远都不应该直接访问数据存储。

  6. JS中的对象操作

     var myData = {name:"name",weather:"weather"};
    
 //判别类型
    
 console.log(angular.isObject(myData)) //true
    
 //遍历
    
 angular.forEach(myData, function(value,key){
    
 	console.log("name:"+key+", value:"+value);
    
 });

 //扩展
    
 var myExtendObject = {city:"london"};
    
 angular.extend(myExtendObject,myData);
    
 console.log(myExtendObject.weather);
    
 //复制
    
 var dataCopy = angular.copy(myData);
    
 console.log(dataCopy.weather);
    
 //删除属性或方法
    
 delete myData.name;
    
 console.log(myData.name) // undefined
    
 //判别是否拥有属性
    
 var hasName = "name" in myData;
    
 console.log(hasName) // false
    
 console.log("weather" in myData)//true

AngularJs 笔记的更多相关文章

  1. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  2. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  3. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  4. AngularJS笔记---作用域和控制器

    什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...

  5. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  6. AngularJS笔记---数据绑定

    一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...

  7. angularjs笔记(三)

    AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...

  8. angularjs笔记(二)

    AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...

  9. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

随机推荐

  1. Python基础数据类型之字典

      基础数据类型之字典 ps:数据类型划分:可变数据类型和不可变数据类型. 不可变数据类型:元组(tupe).布尔值(bool).整数型(int).字符串(str).不可变数据类型也称为可哈希. 可变 ...

  2. 翻译：JVM虚拟机规范1.7中的运行时常量池部分（三）

    4.4.7. The CONSTANT_Utf8_info Structure The CONSTANT_Utf8_info structure is used to represent consta ...

  3. POJ-2234 Matches Game---尼姆博奕裸题

    题目链接: https://vjudge.net/problem/POJ-2234 题目大意: 尼姆博奕裸题 思路: 直接异或 #include<iostream> #include< ...

  4. html标记语言 --文本标记

    html标记语言 --文本标记 二.文本标记 1.h1-h6 标题标记,h1最大 2.font 字体设置标记 2.1 size字体大小.<font size="> 取值范围1-7 ...

  5. ST-LINK V2 DIY笔记（一）

    最近一段时间调试STM32板子的时候,都是用JLINK+杜邦线,或者拿官方板子当STLINK用,可以用,但是体积比较大,有时候觉得比较麻烦.正好前一阵手头项目少,就想DIY一个STLINK. 图是网上 ...

  6. ubuntu安装eclipse

    官网下载界面 这里我选择的是Exlipse Oxygen的Eclipse IDE for Java EE Developers的64位版本. IBM直接下载地址 下载下来的是一个tar.gz的安装包, ...

  7. vue的入门/简介

    vue 特点 1. 响应的数据绑定/响应式编程  2. 组件化 vue优点 1. 轻量级的框架  2. 简单易学 3. 双向数据绑定 4. 组件化 5. 视图,数据,结构分离 6. 虚拟DOM 7. ...

  8. 电力 Web SCADA 工控组态编辑器

    前言 SVG 并非仅仅是一种图像格式, 由于它是一种基于 XML 的语言,也就意味着它继承了 XML 的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步.如 SVG 可以内嵌于其他的 XML 文档 ...

  9. JavaScript 递归

    递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题.通常涉及 函数调用自身. 能够像下面这样直接调用自身的方法或函数,是递归函数: var recursiveFunction = ...

  10. [LeetCode] Number of Atoms 原子的个数

    Given a chemical formula (given as a string), return the count of each atom. An atomic element alway ...