-
ng-init:
数学运算:<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div>
字符串操作:
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>
-
ng-bind:
ng-init="points=[1,15,19,2,40]" // {{ points[2] }},<span ng-bind="points[2]"></span> ng-init="person={firstName:'John',lastName:'Doe'}" <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名: <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
-
ng-model: (动态监听输入数据)
<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div> 验证: <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>状态</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form> css: <style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> 输入你的名字: <input name="myAddress" ng-model="text" required> </form>
-
ng-repeat
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
-
创建自定义的指令
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body>
-
Scope:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; }); </script> <p>当你修改输入框中的值时,会影响到模型(model),当然也会影响到控制器对应的属性值。</p> </body> </html> $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
-
ng-controller:
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }); </script>
-
过滤:
自带过滤
<div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> </div>
自定义过滤
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.msg = "Runoob"; }); app.filter('reverse', function() { //可以注入依赖 return function(text) { return text.split("").reverse().join(""); } });
-
$http 服务:
获取get请求数据
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); });
POST 与 GET 简写方法格式:
$http.get('/someUrl', config).then(successCallback, errorCallback); $http.post('/someUrl', data, config).then(successCallback, errorCallback);
请求方式:
$http.get, $http.head, $http.post, $http.put, $http.delete, $http.jsonp, $http.patch
-
定时器:
$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); });
$interval:
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); })
-
ng-options:
下拉菜单:<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; }); </script>
可以是对象:
<div ng-app="myApp" ng-controller="myCtrl"> <p>选择网站:</p> <select ng-model="selectedSite" ng-options="x.site for x in sites"></select> <h1>你选择的是: {{selectedSite.site}}</h1> <p>网址为: {{selectedSite.url}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site : "Taobao", url : "http://www.taobao.com"} ]; }); </script>
-
ng-disabled, ng-show, ng-hide
ng-disabled: //存在但不能点
<div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">点我!</button> </p> <p> <input type="checkbox" ng-model="mySwitch">按钮 </p> <p>{{ mySwitch }}</p> </div>
ng-show:
<div ng-app=""> <p ng-show="true">我是可见的。</p> <p ng-show="false">我是不可见的。</p> </div> <div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">我是可见的。</p>
ng-hide:
<div ng-app=""> <p ng-hide="true">我是不可见的。</p> <p ng-hide="false">我是可见的。</p> </div>
-
ng-click:
<div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我!</button> <p>{{ count }}</p> </div>
-
创建模块, 添加控制器
创建模块:
var app = angular.module("myApp", []);
添加控制器:
app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName= "Doe"; });
-
服务:
<div ng-app="myApp" ng-controller="myCtrl"> <p>在获取数组 [255, 251, 200] 值时使用过滤器:</p> <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul> <p>过滤器使用服务将10进制转换为16进制。</p> </div> <script> var app = angular.module('myApp', []); // 创建自定义服务,链接到你的模块中: app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); // 要使用自定义服务,需要在定义控制器的时候独立添加,设置依赖关系: app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); app.controller('myCtrl', function($scope) { $scope.counts = [255, 251, 200]; }); </script>
-
表单:
示例一:
<div ng-app="myApp" ng-controller="formCtrl"> // novalidate属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。 <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>
示例二:
<!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp" ng-controller="validateCtrl"name="myForm" novalidate> <p>用户名:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用户名是必须的。</span> </span> </p> <p>邮箱:<br> <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的。</span> <span ng-show="myForm.email.$error.email">非法的邮箱。</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"> </p> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; }); </script> </body> </html>
附加:
$dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录
-
全局API:
API 描述 angular.lowercase (<angular1.7) angular.$$lowercase()(angular1.7+) 转换字符串为小写 angular.uppercase() (<angular1.7) angular.$$uppercase()(angular1.7+) 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串,如果是返回 true。 angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。
-
包含:
runoob.htm 文件代码:
<h1>菜鸟教程</h1> <p>这是一个被包含的 HTML 页面,使用 ng-include 指令来实现!</p>
include.html
<body ng-app=""> <div ng-include="'runoob.htm'"></div> </body>
-
ngAnimate
ngAnimate
模型可以添加或移除 class 。
ngAnimate
模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生ngAnimate
就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:ng-show, ng-hide, ng-class, ng-view, ng-include, ng-repeat, ng-if, ng-switc
ng-show
和ng-hide
指令用于添加或移除ng-hide
class
的值。
其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。
此外, 在动画完成后,HTML 元素的类集合将被移除。例如: ng-hide 指令会添加以下类:ng-animate ng-hide-animate ng-hide-add (如果元素将被隐藏) ng-hide-remove (如果元素将显示) ng-hide-add-active (如果元素将隐藏) ng-hide-remove-active (如果元素将显示)
-
AngularJS 路由:
简单示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例 - 菜鸟教程</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script> </head> <body ng-app='routingDemoApp'> <h2>AngularJS 路由应用</h2> <ul> <li><a href="#!/">首页</a></li> <li><a href="#!/computers">电脑</a></li> <li><a href="#!/printers">打印机</a></li> <li><a href="#!/blabla">其他</a></li> </ul> <div ng-view></div> // 内容显示位置 <script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]); </script> </body> </html>
路由设置对象:
$routeProvider.when(url, { template: string, // 插入简单的 HTML 内容 templateUrl: string, // 插入 HTML 模板文件如:'views/computers.html' controller: string, function 或 array, // function、string或数组类型,在当前模板上执行的controller函数,生成新的scope controllerAs: string, // string类型,为controller指定别名。 redirectTo: string, function, // 重定向的地址。如: {redirectTo:'/'} resolve: object<key, function> // 指定当前controller所依赖的其他模块。 });
示例二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例 - 菜鸟教程</title> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script> <script type="text/javascript"> angular.module('ngRouteExample', ['ngRoute']) .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) .controller('AboutController', function ($scope, $route) { $scope.$route = $route;}) .config(function ($routeProvider) { $routeProvider. when('/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' }). when('/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' }). otherwise({ redirectTo: '/home' }); }); </script> </head> <body ng-app="ngRouteExample" class="ng-scope"> <script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> </script> <div> <div id="navigation"> <a href="#!/home">Home</a> <a href="#!/about">About</a> </div> <div ng-view=""> </div> </div> </body> </html>
-
小总结:
1) 元素包含了 AngularJS 应用 (ng-app=)。
<div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。在一个应用可以有很多控制器。
2)AngularJS 指令:
指令 描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-checked 规定元素是否被选中 ng-class 指定 HTML 元素使用的 CSS 类 ng-class-even 类似 ng-class,但只在偶数行起作用 ng-class-odd 类似 ng-class,但只在奇数行起作用 ng-click 定义元素被点击时的行为 ng-cloak 在应用正要加载时防止其闪烁 ng-controller 定义应用的控制器对象 ng-copy 规定拷贝事件的行为 ng-csp 修改内容的安全策略 ng-cut 规定剪切事件的行为 ng-dblclick 规定双击事件的行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件的行为 ng-form 指定 HTML 表单继承控制器表单 ng-hide 隐藏或显示 HTML 元素 ng-href 为 the <a> 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 在应用中包含 HTML 文件 ng-init 定义应用的初始化值 ng-jq 定义应用必须使用到的库,如:jQuery ng-keydown 规定按下按键事件的行为 ng-keypress 规定按下按键事件的行为 ng-keyup 规定松开按键事件的行为 ng-list 将文本转换为列表 (数组) ng-model 绑定 HTML 控制器的值到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时的行为 ng-mouseenter 规定鼠标指针穿过元素时的行为 ng-mouseleave 规定鼠标指针离开元素时的行为 ng-mousemove 规定鼠标指针在指定的元素中移动时的行为 ng-mouseover 规定鼠标指针位于元素上方时的行为 ng-mouseup 规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 在 <select> 列表中指定 <options> ng-paste 规定粘贴事件的行为 ng-pluralize 根据本地化规则显示信息 ng-readonly 指定元素的 readonly 属性 ng-repeat 定义集合中每项数据的模板 ng-selected 指定元素的 selected 属性 ng-show 显示或隐藏 HTML 元素 ng-src 指定 <img> 元素的 src 属性 ng-srcset 指定 <img> 元素的 srcset 属性 ng-style 指定元素的 style 属性 ng-submit 规定 onsubmit 事件发生时执行的表达式 ng-switch 规定显示或隐藏子元素的条件 ng-transclude 规定填充的目标位置 ng-value 规定 input 元素的值
3)AngularJS 事件:
ng-click, ng-dbl-click, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-keydown, ng-keyup, ng-keypress, ng-change
4)AngularJS 验证属性:
$dirty, $invalid, $erro
5)AngularJS 全局 API:
API 描述 angular.lowercase() 将字符串转换为小写 angular.uppercase() 将字符串转换为大写 angular.copy() 数组或对象深度拷贝 angular.forEach() 对象或数组的迭代函数
6)JSON:
API 描述 angular.fromJson() 反序列化 JSON 字符串 angular.toJson() 列化JSON 字符串
-
$q:
defer的方法:
function asyncGreet(name) { var deferred = $q.defer(); //通过$q.defer()创建一个deferred延迟对象,在创建一个deferred实例时,也会创建出来一个派生的promise对象,使用deferred.promise就可以检索到派生的promise。 deferred.notify('About to greet ' + name + '.'); //延迟对象的notify方法。 if (okToGreet(name)) { deferred.resolve('Hello, ' + name + '!'); //任务被成功执行 } else { deferred.reject('Greeting ' + name + ' is not allowed.'); //任务未被成功执行 } return deferred.promise; //返回deferred实例的promise对象 } function okToGreet(name) { //只是mock数据,实际情况将根据相关业务实现代码 if(name == 'Superman') return true; else return false; } var promise = asyncGreet('Superman'); //获得promise对象 //promise对象的then函数会获得当前任务也就是当前deferred延迟实例的执行状态。它的三个回调函数分别会在resolve(), reject() 和notify()时被执行 promise.then(function(greeting) { alert('Success: ' + greeting); }, function(reason) { alert('Failed: ' + reason); }, function(update) { alert('Got notification: ' + update); });
-
Directive
var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } }, link: function postLink(scope, iElement, iAttrs) { ... } }; return directiveDefinitionObject; }); 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。 E(元素):<directiveName></directiveName> A(属性):<div directiveName='expression'></div> C(类): <div class='directiveName'></div> M(注释):<--directive:directiveName expression--> 2.priority (数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行; 3.terminal (布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行) 4.template(字符串或者函数)可选参数,可以是: (1)一段HTML文本 template: '<div><h1>Hi 我是小小龙~~~</h1></div>', (2)一个函数,可接受两个参数tElement和tAttrs 其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)形如: <hello-world2 title = '我是第二个directive'></hello-world2> 其中title就是tattrs上的属性 <script type="text/javascript"> var app = angular.module('myApp', []); app.directive("helloWorld2",function(){ return{ restrict:'EAC', template: function(tElement,tAttrs){ var _html = ''; _html += '<div>' +'hello '+tAttrs.title+'</div>'; return _html; } }; }); 5.templateUrl(字符串或者函数),可选参数,可以是 (1)一个代表HTML文件路径的字符串 (2)一个函数,可接受两个参数tElement和tAttrs(大致同上) 注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板 你可以再你的index页面加载好的,将下列代码作为你页面的一部分包含在里面。 第一种方式: <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); </script> <script type='text/ng-template' id='hello.html'> <div><h1>Hi 我是林炳文~~~</h1></div> </script> 第二种方式: <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', templateUrl: 'hello.html', replace: true }; }); app.run(["$templateCache", function($templateCache) { $templateCache.put("hello.html", "<div><h1>Hi 我是林炳文~~~</h1></div>"); }]); </script>
-
angular框架
npm install -g cnpm --registry=https://registry.npm.taobao.org // 安装cnpm cnpm install -g @angular/cli // 安装脚手架 ng new angulardemo // 创建项目 cnpm install // 安装依赖 ng serve --open // 启动项目 angular6中使用socket.io报global is not define 错误? 找到polyfills文件加入 (window as any).global = window;
Angular基础学习
最新推荐文章于 2022-03-29 08:55:10 发布