小弟刚接触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简单入门。

一个简单的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;

})

查看结果

angular.js简单入门。

再次新增 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简单入门。

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

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

秒客网

angular.js简单入门。

Services 与指令的使用

相关文章