angular.js简单入门。 Services 与指令的使用

小弟刚接触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";
})

最后看页面效果。

angular.js简单入门。
Services 与指令的使用

一个简单的angularjs 入门就此完成。

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;
})

查看结果

angular.js简单入门。
Services 与指令的使用

再次新增 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;
})

看结果：

angular.js简单入门。
Services 与指令的使用

最终发现新创建一个 value 会覆盖前一个 value的值

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

angular.js简单入门。 Services 与指令的使用

相关推荐