angular.js简单入门。

时间：2022-09-21 16:56:11

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

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

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

  2. EChart&period;js 简单入门

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

  3. angular&period;js快速入门 hello world

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

  4. JS简单入门教程

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

  5. angular&period;js 简单的表达式

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

  6. &lbrack;转&rsqb;Backbone&period;js简单入门范例

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

  7. 98、vue&period;js简单入门

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

  8. anime&period;js 简单入门教程

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

  9. 13、vue&period;js简单入门

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

随机推荐

  1. 认识Git

    ---恢复内容开始--- Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git作为当下最潮流的版本控制工具也是有他独特的不同,最大的不同就在于他有分布式版本管理的 ...

  2. mybatis Oracle 批量插入，批量更新

    传入的参数只要是list类型的参数就行了..............1.批量插入<insert id="insertBatch" parameterType="ja ...

  3. 关于VS2013中Win32程序怎么修改图标

    首先向资源文件上加上你要添加的资源(把你要添加的图标放在你的工程的下面,然后右击资源文件选中添加资源,然后选择导入你要添加的图标),下面你只要打开你项目的.rc文件要用查看代码形式打开,然后只要把系统 ...

  4. mui中的关闭页面的几种方法

    一.总结: mui中关闭当前页面的几种方式: 1.swipeBack(暂未测试过) 2.keyEventBind(暂未测试过) 3.给标签的class加.mui-action-back(返回的是前一个 ...

  5. 第六十九篇、OC&lowbar;录制语音和播放语音功能的实现

    录制: 1.设置全局属性 NSURL *recordedFile;//存放路径 AVAudioPlayer *player;//播放 AVAudioRecorder *recorder;//录制 NS ...

  6. C语言指针作业总结

    学号 姓名 作业地址 PTA实验作业5 PTA排名2 阅读代码2 总结1 代码规范 总分 是否推荐博客 推荐理由 32 **薇 http://www.cnblogs.com/linyiwei/p/80 ...

  7. Java 核心系列教程

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! 关于Java核心技术学习积累的例子,是初学者及核心技术巩固的最 ...

  8. 【转】每天一个linux命令&lpar;24&rpar;：Linux文件类型与扩展名

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/22/2781912.html Linux文件类型和Linux文件的文件名所代表的意义是两个不同的概 ...

  9. leetcode412

    public class Solution { public IList<string> FizzBuzz(int n) { var list = new List<string&g ...

  10. 多线程之ThreadLocal

    Java并发编程:深入剖析ThreadLocal 想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本文先谈一下对ThreadLoc ...

相关文章