angularjs1-3,工具方法，bootstrap，多个module，引入jquery
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs1-3,工具方法，bootstrap，多个module，引入jquery相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> {{name}} {{isArray}} {{name1}} {{eq}} </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller(‘firstController‘,[‘$scope‘,function($scope){ /*$scope.name=‘zhangsan‘; $scope.arr=[1,2,3]; $scope.isArray=angular.isArray($scope.arr); $scope.name1=angular.uppercase($scope.name); $scope.a=‘111‘; $scope.b=‘111‘; $scope.eq=angular.equals($scope.a,$scope.b); console.log($scope.eq);//true $scope.a={name:‘张三‘}; $scope.b={age:10}; $scope.c=angular.extend($scope.b,$scope.a); console.log($scope.c);//Object {age: 10, name: "张三"} var json = {"name":"hello","age":"20"}; console.log(json);//Object {name: "hello", age: "20"} $scope.json=angular.toJson(json); console.log($scope.json);//{"name":"hello","age":"20"} $scope.json=angular.toJson(json,true); console.log($scope.json); var json = ‘{"name":"hello","age":"20"}‘; console.log(json);//{"name":"hello","age":"20"} $scope.json=angular.toJson(json); $scope.json=angular.fromJson(json); console.log($scope.json);//Object {name: "hello", age: "20"} $scope.a={name:‘张三‘}; $scope.b={age:10}; $scope.c=angular.copy($scope.a,$scope.b); console.log($scope.a); console.log($scope.b); var json = {"name":"hello","age":"20","sex":‘男‘}; angular.forEach(json,function(val,key){ console.log(val); console.log(key); });*/ var json = {"name":"hello","age":"20","sex":‘男‘}; var results=[]; angular.forEach(json,function(val,key){ console.log(val); console.log(key); this.push(key+‘--‘+val); },results); console.log(results); //绑定对象，作为函数的上下文 var self={name:‘张三‘}; var f=angular.bind(self,function(age){ $scope.info=this.name+‘ is ‘+age; console.log($scope.info); }); f(30); var f=angular.bind(self,function(age){ $scope.info=this.name+‘ is ‘+age; console.log($scope.info); },10); f(); }]); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div> <!-- <div ng-controller="firstController" ng-app="myApp1"> {{name}} </div> <div ng-controller="secondController" ng-app="myApp2"> {{name}} </div> var app1 = angular.module("myApp1", []); var app2 = angular.module("myApp2", []);//报错，module只会初始化一次， --> <div id=‘div1‘ ng-controller="firstController" {{name}} </div> <div id=‘div2‘ ng-controller="secondController"> {{name}} </div> </div> //bootstrap不是css的bootstrap，一般一个页面只有一个module，bootstrap用于页面初始化多个module， <script type="text/javascript"> var app1 = angular.module("myApp1", []); var app2 = angular.module("myApp2", []);//报错，module只会初始化一次， app1.controller(‘firstController‘,function($scope){ $scope.name=‘张三‘; }); app2.controller(‘secondController‘,function($scope){ $scope.name=‘李四‘; }); var div1=document.getElementById(‘div1‘); var div2=document.getElementById(‘div2‘); document.onclick=function(){//动态加载多个module angular.bootstrap(div1,[‘myApp1‘]); angular.bootstrap(div2,[‘myApp2‘]); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="module02.js"></script> <!-- module02.js： var app2 = angular.module("myApp2", []); app2.controller(‘secondController‘,function($scope){ $scope.name=‘李四‘; }); app2.controller(‘threeController‘,function($scope){ $scope.name=‘王五‘; });--> </head> <body ng-app="myApp"> <div> <div ng-controller="firstController"> {{name}} </div> <div ng-controller="secondController"> {{name}} </div> <div ng-controller="threeController"> {{name}} </div> </div> <script type="text/javascript"> var app1 = angular.module("myApp", [‘myApp2‘])//模块的依赖，[‘myApp2‘,‘myApp3‘]可以引入多个，这是插件化引入。 app1.controller(‘firstController‘,function($scope){ $scope.name=‘张三‘; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> //jqueru要放在上面 <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="module02.js"></script> <!-- module02.js： var app2 = angular.module("myApp2", []); app2.controller(‘secondController‘,function($scope){ $scope.name=‘李四‘; }); app2.controller(‘threeController‘,function($scope){ $scope.name=‘王五‘; });--> </head> <body ng-app="myApp"> <div> <div ng-controller="firstController"> <div id="obj1"> </div> {{name}} </div> <div ng-controller="secondController"> {{name}} </div> <div ng-controller="threeController"> {{name}} </div> </div> <script type="text/javascript"> var app1 = angular.module("myApp", [‘myApp2‘]); app1.controller(‘firstController‘,function($scope){ $scope.name=‘张三‘; // $("#obj1").html(‘<span>尿道嗦嘎电视柜 v邓先生广东省高</span>‘); var obj1=document.getElementById(‘obj1‘); angular.element(obj1).html(‘这是angularjs中的jqlite‘); }); </script> </body> </html>
以上是关于angularjs1-3,工具方法，bootstrap，多个module，引入jquery的主要内容，如果未能解决你的问题，请参考以下文章
css Boostrap 3媒体查询 - https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-querie