Helloworld——AngularJS

1.文件

js目录存放位置

2.helloworld.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <meta name="keywords" content="HelloWorld" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <script src="js/common/angular.min.js"></script>
    <script src="js/common/angular-ui-router.min.js"></script>

</head>

<body ng-app>
    <input type="text"
           ng-model="name"
           placeholder="Enter your name">
    <h1>Hello {{name}}</h1>
</body>
</html>

3. 页面展示

HelloWorld页面展示

4. 解析

  • ng-app: 表示启动AngularJS,并指定body归AngularJS控制
  • ng-model: 表示数据model层
  • {{ }}: 花括号等同于ng-bind,属于view层,将model层数据在此处渲染
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,653评论 0 3
  • 个人博客搭建完成,欢迎大家来访问哦黎默丶lymoo的博客 博主最近了解学习了一下angularJS,记录一下心得给...
    黎默丶lymoo阅读 1,057评论 0 21
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,347评论 0 8
  • 简介: AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。 Ang...
    JenniferYe阅读 1,436评论 0 13
  • 今天看了橙子君的每日橙思,第一时间想说说自己的感受,可是呀,一早就忙着了!这不,现在才空闲下来。现在必须抓紧时间写...
    下半辈子_阅读 295评论 0 0