html怎么引入angularjs
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html怎么引入angularjs相关的知识，希望对你有一定的参考价值。
html中引入angularjs的方法：
1、在html的script标签中加入以下代码：
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
2、引入后调用示例：
<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myNoteCtrl">
<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 src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>
3、运行结果：
姓名：<input type="text" ng-model="name" /><br>
地点：<input type="text" ng-model="address" /><br>
数量：<input type="text" ng-model="num" /><br>
日期：<input type="text" ng-model="regDate" /><br>
单价：<input type="text" ng-model="price" /><br>
状态：<input type="text" ng-model="state" /><br>
<input type="button" value="保存" ng-click="save()" />
</div>
$scope.add=function()
$scope.xs=true;
$scope.save=function()
var name=$scope.name;
var address=$scope.address;
var num=$scope.num;
var regDate=$scope.regDate;
var price=$scope.price;
var state=$scope.state;
var obj=
"gname": name,
"address": address,
"num": num,
"regDate": regDate,
"price": price,
"state": state
$scope.yao.push(obj);
$scope.name="";
$scope.address="";
$scope.num="";
$scope.regDate="";
$scope.price="";
$scope.state="";
$scope.xs=false;
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>
以上是关于html怎么引入angularjs的主要内容，如果未能解决你的问题，请参考以下文章