小弟刚接触angular js 就写了一个简单的入门。后续慢慢补。。。
首先看 html 页面。
<html> <meta charset="UTF-8"> <head> <title>angularJS</title> </head> <script type="text/javascript" src="./js/angular.min.js"></script> //引入 angularJS <script type="text/javascript" src="./630.js"></script> //引入自己的js 看下面的js代码。 <body> <div ng-app="630app"> //此处ng-app的值是 630app 所以在js中 angularjs的 module 模块就是630app <div ng-controller="630test"> //此处规定的是ng-controller =630test 所以在js中 控制器部分controller 的第一个参数是 630test <h1>{{msg}}</h1> controller中绑定的msg </div> </div> </body> </html>
接下来看 js代码 也很简单。
angular.module('630app',[])
.controller('630test',function($scope){
$scope.msg="你好,angularJS";
})
最后看 页面效果。
一个简单的angularjs 入门就此完成。
Services 与指令的使用
html代码
<html> <meta charset="UTF-8"> <head> <title>angularJS</title> </head> <script type="text/javascript" src="./js/angular.min.js"></script> <script type="text/javascript" src="./630.js"></script> <body> <div ng-app="630app"> <div ng-controller="630test"> <h1>{{msg}}</h1> <h2>{{testvalue}}</h2> <h3>{{http}}</h3> </div> </div> </body> </html>
接下来js代码
angular.module('630app',[])
.value('testvalue','newtestvalue') //创建value
.constant('http','www.constant.com') //创建常量
.controller('630test',function($scope,testvalue,http){
$scope.msg="你好,angularJS";
$scope.testvalue=testvalue;
$scope.http=http;
})
查看结果
再次新增 value 和 constant 查看
angular.module('630app',[])
.value('testvalue','newtestvalue') //创建value
.value('testvalue','oneoneone') ////再创建一个value 值修改为oneoneone
.constant('http','www.constant.com') //创建常量
.constant('http','www.new------constant.com') //再次创建常量修改值
.controller('630test',function($scope,testvalue,http){
$scope.msg="你好,angularJS";
$scope.testvalue=testvalue;
$scope.http=http;
})
看结果：
最终发现 新创建一个 value 会覆盖前一个 value的值
但是对于新创建的常量的值改变 是不会影响第一次创建的常量的值。