笔记整理-20170714-Angularjs
来源：互联网 发布：怎么把剪切的数据还原 编辑：程序博客网 时间：2024/06/03 23:40
<html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><style>input.ng-invalid { background-color: lightblue;}input.ng-valid { background-color: yellow;}.animateClass { transition: all linear 0.5s; background-color: lightblue; height: 100px; width: 100%; position: relative; top: 0; left: 0;}.ng-hide { height: 0; width: 0; background-color: transparent; top:-200px; left: 200px;}</style></head><!-- <body> --><!-- 变量 --><!-- <div ng-app="" ng-init="firstName='John'"> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> <p>姓名为 <span ng-bind="firstName"></span></p> <p>我的第一个表达式： {{ 5 + 5 }}</p></div> --><!-- 字符串连接 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}}</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });</script> --><!-- obj 对象 --><!-- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p></div> --><!-- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p></div> --><!-- 变量运算 --><!-- <div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量： <input type="number" ng-model="quantity"> 价格： <input type="number" ng-model="price"> <p><b>总价：</b> {{ quantity * price }}</p></div> --><!-- 循环遍历数组 --><!-- <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div> --><!-- 循环遍历对象 --><!-- <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> --><!-- 激活显示 --><!-- <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form> --><!-- 表单域的状态 --><!-- ng-model 指令根据表单域的状态添加/移除以下类： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine --><!-- <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> --><!-- 控制器 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name" type="email"> <h1>{{greeting}}</h1> <h1>{{howAreU}}</h1> <button ng-click='sayHello()'>点我</button> <button ng-click='testMe()'>点我</button></div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; $scope.testMe = function(){ $scope.howAreU = 'This is a Great ' + $scope.name + '!'; } });</script>--><!-- 作用域 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in names">{{x}}</li> </ul></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; });</script> --><!-- 根作用域 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names">{{x}} {{lastname}}</li> </ul></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names = ["Emil", "Tobias", "Linus"]; $rootScope.lastname = "Refsnes"; });</script> --><!-- script 隔离 --><!-- <div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}}</div><script src="personController.js"></script> --><!-- 一个函数到底 --><!-- <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> --><!-- angularjs 过滤器 --><!-- currency 格式化数字为货币格式。filter 从数组项中选择一个子集。lowercase 格式化字符串为小写。orderBy 根据某个表达式排列数组。uppercase 格式化字符串为大写。 --><!-- <div ng-app="myApp" ng-controller="totalCtrl"> <p>upper {{ lastName | uppercase }}</p> <p>lower {{ lastName | lowercase }}</p> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>currency {{ (quantity * price) | currency }}</p> <p>Order by Country And Filter</p> <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><script> var app = angular.module("myApp", []); app.controller('totalCtrl', function($scope){ $scope.lastName = 'Zhou'; $scope.names = [ { name: 'zhangsan', country: 'China' }, { name: 'lisi', country: 'Australia' }, { name: 'wangwu', country: 'Germany' } ]; });</script> --><!-- 自定义过滤器 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> {{ msg | reverse }}</div><script> 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(""); } });</script> --><!-- location 对象 --><!-- <div ng-app="myApp" ng-controller="customersCtrl"> {{ myUrl }}</div><script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });</script> --><!-- 【有问题】http 对象 --><!-- <div ng-app="myApp" ng-controller="siteCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul></div><script> var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/sites.php") .success(function (response) {$scope.names = response.sites;}); });</script> --><!-- timeout 对象 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> {{ myHeader }}</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); });</script> --><!-- interval 对象 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> {{ theTime }}</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); });</script> --><!-- 自定义服务 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> {{ hex }}</div><script> var app = angular.module('myApp', []); app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(123); });</script> --><!-- 自定义服务 - 数组访问 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in counts">{{x | myFormat}}</li> </ul></div><script> var app = angular.module("myApp", []); app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); app.controller('myCtrl', function($scope){ $scope.counts = [123, 23, 44, 88, 999]; }); app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]);</script> --><!-- select --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[1]" 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> --><!-- ng-options 的不同显示 --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedSite_1"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> </select> <h1>你选择的是: {{selectedSite_1}}</h1> <select ng-model="selectedSite_2" ng-options="x.site for x in sites"> </select> <h1>你选择的是: {{selectedSite_2.site}}</h1> <p>网址为: {{selectedSite_2.url}}</p> <select ng-model="selectedSite_3" ng-options="x for (x, y) in sites_new"> </select> <h1>你选择的值是: {{selectedSite_3}}</h1> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select> <h1>你选择的值是: {{selectedCar}}</h1></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.sites = [ { url: 'http://baidu.com', site: 'baidu' }, { url: 'http://google.com', site: 'google' }, { url: 'http://yahoo.com', site: 'yahoo' } ]; $scope.sites_new = { site01 : "Google", site02 : "Runoob", site03 : "Taobao" }; $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"} }; });</script> --><!-- 表格 略 --><!-- ng-disabled & ng-show & ng-hide --><!-- <div ng-app="" ng-init="mySwitch=true;hour=13"> <p><button ng-disabled="mySwitch">点我!</button></p> <p><input type="checkbox" ng-model="mySwitch">按钮</p> <p>{{ mySwitch }}</p> <p ng-show="true">ng-show true 我是可见的。</p> <p ng-show="false">ng-show false 我是不可见的。</p> <p ng-show="hour > 12">ng-show hour > 12 我是可见的。</p> <p ng-hide="true">ng-hide true 我是不可见的。</p> <p ng-hide="false">ng-hide false 我是可见的。</p></div> --><!-- ng-click --><!-- <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我！</button> <p>{{ count }}</p></div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.count = 1; });</script> --><!-- 嵌套函数 --><!-- <div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">隐藏/显示</button> <p ng-hide="myVar"> 名: <input type="text" ng-model="firstName"><br> 姓名: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </p></div><script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe" $scope.myVar = false; $scope.toggle = function() { $scope.myVar = !$scope.myVar; }; });</script> --><!-- 表单 --><!-- <form ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstname"> <h1>You entered: {{firstname}}</h1> <input type="checkbox" ng-model="myVar_1"> <h1 ng-show="myVar">My Header</h1> <input type="radio" ng-model="myVar_2" value="dogs">Dogs <input type="radio" ng-model="myVar_2" value="tuts">Tutorials <input type="radio" ng-model="myVar_2" value="cars">Cars <select ng-model="myVar_3"> <option value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select></form><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { // $scope.firstname = "John" });</script> --><!-- form reset --><!-- <div ng-app="myApp" ng-controller="formCtrl"> <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> --><!-- 输入验证 --><!--$dirty 表单有填写记录$valid 字段内容合法的$invalid 字段内容是非法的$pristine 表单没有填写记录 --><!-- <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> --><!-- API --><!-- angular.lowercase() 转换字符串为小写angular.uppercase() 转换字符串为大写angular.isString() 判断给定的对象是否为字符串，如果是返回 true。angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。 --><!-- 【有问题】ng-include --><!-- <div ng-app=""> <div ng-include="'ngInclude.htm'"></div> <div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div></div><script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'http://c.runoob.com/runoobtest/**' ]); });</script> --><!-- 动画 --><!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script><div ng-app="myApp"> 隐藏 DIV: <input type="checkbox" ng-model="myCheck"> <div class="animateClass" ng-hide="myCheck"></div></div><script> var app = angular.module('myApp', ['ngAnimate']);</script> --><!-- factory --><!-- <script>var mainApp = angular.module("mainApp", []);mainApp.value("defaultInput", 5);mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory;});mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});</script> --><!-- factory --><!-- <script>var mainApp = angular.module("mainApp", []);mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; });});mainApp.value("defaultInput", 5);mainApp.service('CalcService', function(MathService){ this.square = function(a) { return MathService.multiply(a,a); }});mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); }});</script> --><!-- </body> --><!-- 自定义指令 --><!-- restrict 值可以是以下几种: E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 --><!-- <body ng-app="myApp"> <runoob-directive></runoob-directive> <div runoob-directive></div> <div class="runoob-directive"></div> --> <!-- directive: runoob-directive --> <!-- <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script></body> --><!-- 路由 --><!-- controller:function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。controllerAs:string类型，为controller指定别名。redirectTo:重定向的地址。resolve:指定当前controller所依赖的其他模块。 --><!--$routeProvider.when(url, { template: string, // 在 ng-view 中插入简单的 HTML 内容 templateUrl: string, // 在 ng-view 中插入 HTML 模板文件 controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object<key, function>}); --><!-- <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 src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> angular.module('routingDemoApp',['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .when('/printers',{template:'这是打印机页面'}) .otherwise({redirectTo:'/'}); }]); </script> <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> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.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></body> --><!-- 应用 --><body><div ng-controller="myNoteCtrl" ng-app="myNoteApp"><h2>我的笔记</h2><p><textarea ng-model="message" cols="40" rows="10"></textarea></p><p><button ng-click="save()">保存</button><button ng-click="clear()">清除</button></p><p>Number of characters left: <span ng-bind="left()"></span></p></div><script> var app = angular.module("myNoteApp", []); app.controller("myNoteCtrl", function($scope) { $scope.message = ""; $scope.left = function() {return 100 - $scope.message.length;}; $scope.clear = function() {$scope.message = "";}; $scope.save = function() {alert("Note Saved");}; });</script></body></html>阅读全文
0 0
- 笔记整理-20170714-Angularjs
- angularjs 未整理--笔记--简单使用和简介
- AngularJs笔记（看菜鸟教程整理的）
- AngularJS笔记
- AngularJS 笔记
- angularjs笔记
- AngularJS笔记
- AngularJS笔记
- AngularJS笔记
- AngularJs笔记
- angularjs笔记
- angularjs笔记
- Angularjs笔记
- Angularjs笔记
- angularjs笔记
- angularjs笔记
- AngularJS笔记
- AngularJS相关资料整理
- Liunx静态库和动态库
- WebSettings
- Activity 跳转间出现短暂黑屏问题
- Echarts使用心得总结——地图
- 第二章总结
- 笔记整理-20170714-Angularjs
- 服务器TIME_WAIT和CLOSE_WAIT详解和解决办法
- 7/6：泛型的概念和作用
- pandas-datareaer的使用
- js实现日期格式化
- ArcGIS 10.2 SDE连接postgresql配置
- 目标分割——基于目标区域（一）
- 第三章 Java内存模型 总结
- 关于Centos 7下安装gitlab服务
