angular.js简单入门。

Posted 2020-08-01 小小de细菌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的值

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

以上是关于angular.js简单入门。的主要内容，如果未能解决你的问题，请参考以下文章

angular.js 入门

Node.js、angular.js 和 MongoDB 入门、建模关系和其他提升技巧 [关闭]

AngularJS入门

SpringBoot入门系列：Spring Security 和 Angular JS

angular js入门总结，bootstrap引入不成功等问题