使用angular写一个hello world

angularjs遵循MVC模式，惯例来一个hello world吧

代码如下:

<html ng-app>
<head>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
</head>
<body>
    <div ng-controller='HelloController'>
        <p>{{greeting.text}}, world</p>
    </div>
</body>
</html>

controllers.js中的内容

代码如下:

function HelloController($scope) {
    $scope.greeting = { text: "Hello"};
}

MVC写起来很不错的感觉~~

赞 (0)

相关推荐

  • AngularJS入门教程之Hello World!

    开始学习AngularJS的一个好方法是创建经典应用程序"Hello World!": 1.使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. 2.将下面的源代码复制到您的HTML文件. 3.在web浏览器中打开这个HTML文件. 源代码: 复制代码 代码如下: <!doctype html> <html ng-app>     <head>         <script src="http://c

  • Android 初识 Helloworld 详解

    Android 初识 Helloworld 详解

    HelloWorld的目录结构有: src:存放应用程序的逻辑代码,这里面的代码是人工写的gen:存放资源代码,这里面的代码是自动生成的assets:存放mp3等视频资源bin:生成的可执行的二进制文件目录libs:引用到的库,这里和bin/dexedLibs里面的目录是一致的res:资源文件.往这个目录添加资源的时候,会被gen/R.java自动记录,自动那个记录到R.java中去.AndroidManifest.xml:项目的总配置项,记录应用中使用到各种全局的配置ic_launcher-w

  • Cocos2d-x中调用Lua及HelloWorld.lua源码分解

    Cocos2d-x中调用Lua及HelloWorld.lua源码分解

    Lua脚本,以前我不知道它有多强大,但是当我做了1年的手机网游之后,起码我发现了,更新客户端是一件很恐怖的事情(会导致大量玩家的流失,以及有一个漫长并且惊心动魄的审核过程),太扯了.于是,如果可以只更新脚本,那就不需要玩家重新下载客户端了,直接在线更新,嗯嗯,虽然我发现了这个,但是还没有实现.噗,代码写烂了,不好改.   所以啊,我已经做好准备了,如果下次用cocos2d-x开发,lua不可少啊~!   看看官方的例子吧,先来AppDelegate.cpp的applicationDidFinis

  • 全民学编程之 Hello World

    问题的提出 相传古时候有个退休的程序员,在家闲来无事,决定修习书法之道.第一日,备好笔墨纸砚,便挥毫写下一行大字:"Hello World". 学过编程语言的人都笑了,在程序员心目中,hello world是一切的开始,程序语言教科书的第一个演示程序.WordPress的第一篇示例文章(我的hello world).环境搭建成功后的第一个测试-- 可是,为什么呢?为什么都用"Hello World"来做程序语言的入门程序,以及其他这一切的开始呢? Hello Wor

  • 从零学Python之hello world

    简单的'Hello World!' Python命令行 假设你已经安装好了Python, 那么在Linux命令行输入: 复制代码 代码如下: $python 将直接进入python.然后在命令行提示符>>>后面输入: 复制代码 代码如下: >>>print('Hello World!') 可以看到,随后在屏幕上输出: 复制代码 代码如下: Hello World! print是一个常用函数,其功能就是输出括号中得字符串. (在Python 2.x中,print还可以是一

  • hello world程序集锦

    hello world作为所有编程语言的起始阶段,占据着无法改变的地位,所有中/英/法/德/美--版本的编程教材中,hello world总是作为第一个TEST记录于书本之中,所有的编程第一步就在于此了!经典之中的经典! hello world! "Hello, world"程序是指在计算机屏幕上输出Hello, world这行字符串的计算机程序,"hello, world"的中文意思是"世界,你好".这个例程在Brian Kernighan和D

  • Go语言hello world实例

    在开始编写应用之前,我们先从最基本的程序开始.就像你造房子之前不知道什么是地基一样,编写程序也不知道如何开始.因此,在本节中,我们要学习用最基本的语法让Go程序运行起来. 程序 这就像一个传统,在学习大部分语言之前,你先学会如何编写一个可以输出hello world的程序. 准备好了吗?Let's Go! 复制代码 代码如下: package main import "fmt" func main() {     fmt.Printf("Hello, world or 你好,

  • 使用angular写一个hello world

    angularjs遵循MVC模式,惯例来一个hello world吧 复制代码 代码如下: <html ng-app> <head>     <script type="text/javascript" src="angular.min.js"></script>     <script type="text/javascript" src="controllers.js"

  • angular写一个列表的选择全选交互组件的示例

    开发业务后台经常要用到表格里的选择,全选这种交互.而且不同系统不同场景的UI还不一样.比如:表格里就是简简单单的checkbox:图片列表这种,UI设计师会搞点花样,用户选择一下,会在图片上盖一层半透明的勾选提示等等.我们的系统是用angular 1.X版本开发.所以,我采用angular的装饰性指令编写几个指令,把它们配合在一起使用,来封装这样的场景.这与之前我们遇到的组件的开发思路又不太一样.我们先来分析一下需求及扩展点. 需求分析 实现单选: 实现全选: 可以设置允许多选还是单选.如果多选

  • 动手写一个angular版本的Message组件的方法

    动手写一个angular版本的Message组件的方法

    学习一个框架或库的最好方法是看官方文档,并着手去写例子.最近在利用空闲的时间学习angular,那今天就尝试写一个message组件,并通过message服务动态加载message组件. 我所参与的项目基本是用jquery完成的.之前,在项目中自己动手写过一个简单的message插件,样子如下图. 那现在就使用angular(版本5.0.0)来实现message组件. message组件 message组件要根据传入的类型.消息和duration来显示.创建三个文件:message.compon

  • Angular实现一个简单的多选复选框的弹出框指令实例

    Angular实现一个简单的多选复选框的弹出框指令实例

    之前的文章有写过包含树结构下拉框的. 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css"

  • 浅析Angular 实现一个repeat指令的方法

    在项目中常常会使用 ngFor指令,之前只会使用它,具体如何实现的却不得而知.终于这几天有时间"研究"了下它是如何实现的,顺便自己写个简单的 ngFor指令:repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板,指令通过TemplateRef的模板来创建dom元素 ViewContainerRef 可以理解为TemplateRef的容器,在调用ViewContainerRef上的createEmb

  • 用Angular实现一个扫雷的游戏示例

    最近想找些项目练练手,发现去复刻一些小游戏还挺有意思的,于是就做了一个网页版的扫雷. 点击这里看看最终的效果. 创建应用 该项目使用的是 monorepo 的形式来存放代码.在 Angular 中,构建 monorepo 方法如下: ng new simple-game --createApplication=false ng generate application mine-sweeper 在这里,因为该项目以后还会包含其他各种其他的应用,所以个人觉得使用 monorepo 构建项目是比较正

  • vuejs手把手教你写一个完整的购物车实例代码

    vuejs手把手教你写一个完整的购物车实例代码

    由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

  • 写一个漂亮Rakefile的方法

    Rake 我就不再介绍了,Ruby 的 Make ,许多方面都比 Make 要更好用一些.和 Makefile 不同的是,Rakefile 本身其实就是一段 Ruby 代码,这样的好处有很多,一方面在 Rake 里面就可以很直接地做任何 Ruby 能做的事了,另一方面由于 Ruby 对 DSL 支持良好,所以 Rakefile 通常看起来也并不那么"代码". 不过,代码始终是代码,Makefile 尚且可以写得很乱,Rakefile 要写乱就更容易了,幸运地是,Rake 提供了一些功能

  • 用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    用函数模板,写一个简单高效的 JSON 查询器的方法介绍

    JSON可谓是JavaScript的亮点,它能用优雅简练的代码实现Object和Array的初始化.同样是基于文本的数据定义,它比符号分隔更有语义,比XML更简洁.因此越来越多的JS开发中,使用它作为数据的传输和储存. JS数组内置了不少有用的方法,方便我们对数据的查询和筛选.例如我们有一堆数据: 复制代码 代码如下: var heros = [        // 名============攻=====防=======力量====敏捷=====智力====        {name:'冰室女巫

  • node通过npm写一个cli命令行工具

    node通过npm写一个cli命令行工具

    前言 如果你想写一个npm插件,如果你想通过命令行来简化自己的操作,如果你也是个懒惰的人,那么这篇文章值得一看. po主的上一篇文章介绍了定制自己的模版,但这样po主还是不满足啊,项目中我们频繁的需要新建一些页面,逻辑样式等文件,每次都手动new一个,然后复制一些基本代码进去非常的麻烦,所以就有了这篇文章.接下来就让po主为大家一步一步演示怎么做一个npm命令行插件. 注册npm账户 发布npm插件,首先肯定要有个npm帐号了,过程就不啰嗦了,走你. npm官网 有了账号后,我们通过npm in

随机推荐