angular.js简单入门。

小弟刚接触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的值

但是对于新创建的常量的值改变 是不会影响第一次创建的常量的值。  

 

posted @ 2016-06-30 12:43  BiuBiuBiu666  阅读(188)  评论(0)    收藏  举报