小弟刚接触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简单入门。的更多相关文章

  1. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  2. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. angular.js快速入门 hello world

    我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...

  4. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

  5. angular.js 简单的表达式

    <!doctype html> <html> <head> <meta charset ="utf-8"> <script s ...

  6. [转]Backbone.js简单入门范例

    本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...

  7. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  8. anime.js 简单入门教程

    anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...

  9. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. OpenCV获取RTSP解码播放

    #include <opencv2/opencv.hpp> int main(int argc, char **argv){ IplImage *pFrame = NULL, *srcIm ...

  2. php语法笔记

    1.  php中设置页面的编码方式: header(“content-type:text/html;charset=utf-8”); 2.  数据类型 布尔类型:Boolean/bool:true.f ...

  3. rem第一天

    Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上是这样描述rem的——“font size of the root element” .下面我们就一起来 ...

  4. php curl请求。header头中添加请求信息

    function get_data($key,$authorization,$url){ $headers = array(    'api-key:'.$key,    'authorization ...

  5. 《DSP using MATLAB》示例Example7.20

    代码: M = 51; alpha = (M-1)/2; Dw = 2*pi/M; l = 0:M-1; wl = Dw*l; T1 = j*0.39; k1 = 0:floor((M-1)/2); ...

  6. LeetCode Subarray Product Less Than K

    原题链接在这里:https://leetcode.com/problems/subarray-product-less-than-k/description/ 题目: Your are given a ...

  7. phpstorm2017.3.6的激活、样式设置和汉化

    一:安装phpstorm2017.3.6,并激活.设置样式.(1)先在phstorm官网里www.jetbrains.com下载phpstorm2017.3.6,按照步骤安装即可.下面开始激活!(2) ...

  8. SublimeText3常用插件安装与使用

    packagecontroller的安装 https://packagecontrol.io/ 安装了它就可以更好的进行插件的安装和管理 复制代码,打开控制面板[ctrl+·]将代码拷贝,即可进行安装 ...

  9. php通过存储过程传入汉字参数并写入数据库

    写入数据库,汉字为???样式的乱码,后根据网上介绍的方法,参数前加N,数据库汉字内容变成空白. 解决方法,在PHP中先转为base64,再在mysql中base64解码,前提先保证mysql中有bas ...

  10. 南阳OJ 1170 最大的数

    最大的数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 小明和小红在打赌说自己数学学的好,于是小花就给他们出题了,考考他们谁NB,题目是这样的给你N个数 在这n个数 ...