首页 > 代码库 > angular学习-入门基础
angular学习-入门基础
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>angular</title><script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script><script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script><link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"><script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script></head><body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> ng-switch的使用 </div> <div class="panel-body" ng-controller="sw"> <div ng-init="a=2"> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div> <div> <button ng-click="a=1" class="btn btn-primary">test</button> <button ng-click="a=2" class="btn btn-info">test</button> <button ng-click="a=3" class="btn btn-warning">test</button> </div> </div> <script type="text/javascript"> app.controller("sw", function($scope) { }); </script> </div> <br> <div class="panel panel-default"> <div class="panel-heading"> ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的) </div> <div class="panel-body" ng-controller="srcCon"> <a ng-href="http://www.mamicode.com/{{logo}}" > <img ng-src="http://www.mamicode.com/{{logo}}" /> </a> </div> <script type="text/javascript"> app.controller("srcCon", function($scope) { $scope.logo = "http://www.mainbo.com/templets/images/logo.gif"; }); </script> </div> <div class="panel panel-default"> <div class="panel-heading"> angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可) </div> <div class="panel-body"> <hehe id="wh" ng-style="{width: w + ‘px‘, height: h + ‘px‘, backgroundColor: ‘#364‘}"> hehe--o(^▽^)o哇; </hehe> </div> <script type="text/javascript"> app.directive("hehe", function() { function compile() { }; return { link : function($scope, $element) { var obj = angular.element($element); //obj.find不好用; var add = obj[0].getElementsByClassName("add")[0]; var reduce = obj[0].getElementsByClassName("reduce")[0]; angular.element(add).bind("click", function(){ $scope.h = $scope.h+10; apply(); }) angular.element(reduce).bind("click", function(){ $scope.h = $scope.h-10; apply(); }); function apply() { $scope.$apply(); } return compile; }, controller : function($scope) { $scope.w = 200; $scope.h = 50; //$scope.$apply(); }, restrict: ‘AE‘, replace : true, scope : "=ng-style", transclude : true, template : ‘<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>‘ } }) </script> </div> <div class="panel panel-default"> <div class="panel-heading"> 使用模板 </div> <div class="panel-body" ng-controller="ngTpl"> <!---这个type要声明准确--> <script type="text/ng-template" id="tpl"> {{ver}} </script> <!---tpl是一个定值不是变量，要给变量要在scope中进行定义----> <div ng-include src="http://www.mamicode.com/‘tpl‘"></div> <div class="well"> <button ng-click="chan()">change</button> </div> </div> <script type="text/javascript"> app.controller("ngTpl", function($scope) { function hehe(str) { str = _.shuffle(str); return str.join("") }; $scope.ver = "var——ver--heehe"; $scope.chan = function() { $scope.ver = hehe( $scope.ver ); }; }); </script> </div> <div class="panel panel-default"> <div class="panel-heading"> <span class="label label-danger">update</span>angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新; </div> <div class="panel-body" ng-controller="apply"> {{hehe}} <input type="text" ng-model="m0" /> <div class="well"> the value set by $scope.$watch ==>> {{wat}} </div> <br> <button ng-click="up()" class="btn btn-default"> applay; </button> </div> <script type="text/javascript"> app.controller("apply", function($scope) { $scope.hehe = "lll________xxx"; $scope.m0 = 1; ss = $scope; $scope.up = function() { $scope.hehe = $scope.m0; //可以,但是给了提示的报错, 谁知道为甚毛? //$scope.$apply(); $scope.$digest(); }; //给$scope.m0变量是无效的; $scope.$watch("m0", function(va) { $scope.wat = va; }) }); </script> </div> <div class="panel panel-default"> <div class="panel-heading"> angular中的工具方法列表 </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="http://www.mamicode.com/###">angular.bind</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.bootstrap</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.copy</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.element</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.equals</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.extend</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.forEach</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.fromJson</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.identity</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.injector</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isArray</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isDate</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isDefined</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isElement</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isFunction</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isNumber</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isObject</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isString</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.isUndefined</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.lowercase</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.module</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.noop</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.reloadWithDebugInfo</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.toJson</a></li> <li role="presentation"><a href="http://www.mamicode.com/###">angular.uppercase</a></li> </ul > <div class="well"> 这些工具方法跟其他库差不多; angular.element是anguarLite选择元素的小JQ; <br> angular.module是模块元素的方法; </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> ng-transclude的使用(这个是官方的案例): </div> <div class="panel-body" ng-controller="ExampleController"> <div> <input ng-model="title"><br> <textarea ng-model="text"></textarea> <br/> <pane title="{{title}}">{{text}}</pane> </div> </div> <script type="text/javascript"> app.directive(‘pane‘, function(){ return { restrict: ‘E‘, transclude: true, scope: { title:‘@‘ }, template: ‘<div style="border: 1px solid black;">‘ + ‘<div style="background-color: gray">{{title}}</div>‘ + ‘<ng-transclude></ng-transclude>‘ + ‘</div>‘ }; }) .controller(‘ExampleController‘, [‘$scope‘, function($scope) { $scope.title = ‘Lorem Ipsum‘; $scope.text = ‘Neque porro quisquam est qui dolorem ipsum quia dolor...‘; }]); </script> </div> <div class="panel panel-default"> <div class="panel-heading"> ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;) </div> <script src="https://yearofmoo.github.io/ngMessages/angular-messages.js"></script> <div class="panel-body" ng-controller="fromvaild"> 如果不用ng-message组件的错误提示如下; <form name="userForm"> <div class="field"> <label for="emailAddress">Enter your email address:</label> <input type="email" name="emailAddress" ng-model="data.email" required /> <!-- this stuff is WAY too complex --> <div ng-if="userForm.emailAddress.$error.required" class="error"> You forgot to enter your email address... </div> <div ng-if="!userForm.emailAddress.$error.required && userForm.emailAddress.$error.email" class="error"> You did not enter your email address correctly... </div> </div> <input type="submit" /> </form> <br> 使用angular的message组件, 我没跑起来，⑩吐了, 真不好用, 按照DEMO都没跑起来; <div class="control-group"> <label for="input_email_address">Email Address:</label> <input class="form-control" type="email" name="email_address" id="input_email_address" ng-model="data.email_address" fake-remote-record-validator="fakeEmails" required /> <div class="error-messages" ng-if="interacted(my_form.email_address)" ng-messages="my_form.email_address.$error" ng-messages-include="form-messages"> <div ng-message="required">You did not enter an email address</div> <div ng-message="record-loading">Checking database...</div> <div ng-message="record-taken">Sorry, but {{ $parent.data.email_address }} is already taken</div> </div> </div> <div class="control-group"> <label for="input_phone">Phone Number:</label> <input class="form-control" type="text" name="phone" id="input_phone" ng-model="data.phone" ng-pattern="phoneNumberRegex" required /> <div class="error-messages" ng-if="interacted(my_form.phone)" ng-messages="my_form.phone.$error" ng-messages-include="form-messages"> <div ng-message="required">You did not enter a phone number</div> <div ng-message="pattern">Please enter your phone number in the format of: (XXX) YYY-ZZZZ</div> </div> </div> <a href="https://yearofmoo.github.io/ngMessages/">老外写的DEMO</a> </div> <script type="text/javascript"> app.controller("fromvaild", function($scope) { //$scope.myField.$error = { minlength : true, required : false }; }) </script> </div> <div class="panel panel-default"> <div class="panel-heading"> $timeout和$interval,这两个服务; </div> <div class="panel-body" ng-controller="st"> <div class="list-group"> <a href="http://www.mamicode.com/#" class="list-group-item active"> <h4 class="list-group-item-heading">setInterval</h4> <p class="list-group-item-text"> $interval(fn, delay, [count], [invokeApply]); </p> </a> <a href="http://www.mamicode.com/#" class="list-group-item"> <h4 class="list-group-item-heading">timeout</h4> <p class="list-group-item-text"> $timeout(fn, [delay], [invokeApply]); </p> </a> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 0% </div> </div> <button class="btn-default btn" ng-click="prog()"> start </button> </div> <script type="text/javascript"> app.controller("st", function($scope,$element,$interval) { var $el = $($element[0]).find(".progress-bar"); console.log(arguments); //使用angular.element选中的元素用find找不到东西; $scope.prog = function() { var df = $interval(function() { var val = parseInt($el.html())+4; if(val>=104)return //df.cancel(); $el.html( val+"%" ).width(val+"%"); },100); console.log(df) //console.log(aa = $interval) }; }); </script> </div> <div class="list-group"> <a class="list-group-item list-group-item-success" href="http://www.zouyesheng.com/angular.html"> 参考链接,zouyesheng <span class="badge">4</span> </a> <a class="list-group-item" href="http://www.angularjs.cn/"> 参考链接,angular中文网; <span class="badge">4</span> </a> <a class="list-group-item list-group-item-success" href="https://github.com/angular/"> 参考链接,angular的代码库(github); <span class="badge">4</span> </a> </div></body></html><script type="text/javascript"> //滚动到最后,测试用的; window.onload = function() { window.scrollTop = 1000000; }</script>
angular学习-入门基础
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。