要使用angularjs,首先得下载并且在页面中调用它

先上源码

<html ng-app="app1">
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>angularJs Test</title>
<script src="angular.min.js"></script>
</head>
<body ng-controller='ctrl1' >
<span ng-bind='name'>aaaaaaaaaaaa</span>
<script>
var app=angular.module('app1',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.name="China";
}])
</script>
</body>
</html>

几个说明

1.ng-app代表这是一个angularJs app

2.ng-controller代表这是一个控制器,简单来讲它定义了作用域;

3.如何绑定字符串

<span ng-bind='name'>aaaaaaaaaaaa</span>
<span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span>

第一种方式直接绑定了scope的一个变量

第二种方式可以在绑定scope name的情况下,可以在前面加上this is:

但是无论哪种方式,都会冲掉span里面有的aaaaaaaaaaaaa内容

效果如下

第一种解析结果

第二种解析结果

其实还有第三种方式,不过这种方式当angular没有加载完时,会直接显示在页面上,简单讲页面会显示没有解析的结果,代码和效果也上吧

<span >aaaaaaaa:{{name}}</span>

angular入门--绑定字符串的更多相关文章

  1. angular入门

    angular入门 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  2. Angular入门笔记

    AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...

  3. OO的奇妙冒险——OOP入门与字符串处理

    OO的奇妙冒险 ~OOP入门与字符串处理~ 总体分析 公测 中测(基础与进阶): 其实在我看来,从完成作业的角度来说,中测的基础与进阶并没有任何区别,都不能挂,都不太难,都对得分没有什么影响.中测的样 ...

  4. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

  5. python3入门之字符串

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 经过前面的介绍相信大家也对python有了一个初步的了解:本节主要介绍字符串,不管学习什么编语言字符串一定在其中扮演着重要的地位.本节主要讲解,字 ...

  6. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  7. Angular入门篇高速开发导航网

    简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...

  8. Nodejs之MEAN栈开发(五)---- Angular入门与页面改造

    这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...

  9. Angular 入门学习

    1.Hello World 入门 源代码 <!doctype html> <html ng-app> <head> <script src="htt ...

随机推荐

  1. Java实现第九届蓝桥杯付账问题

    付账问题 题目描述 [题目描述] 几个人一起出去吃饭是常有的事.但在结帐的时候,常常会出现一些争执. 现在有 n 个人出去吃饭,他们总共消费了 S 元.其中第 i 个人带了 ai 元.幸运的是,所有人 ...

  2. 服务端监控工具Nmon使用方法

    一.认识nmon 1.简介 nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具,它能在系统运行过程中实时地捕捉系统资源的使用情况,记录的信息比较全面, 并且能输出结果到文件中,然 ...

  3. v-else-if(v-show)

    <div id="app"> <div v-if="type === 'A'"> A </div> <div v-el ...

  4. Java复习目录

    还是寒假用了十多天的时间在b站把基础部分学习完了,现在刚开学开始上Java课,以博客的方式复习前面学习的内容. 总结: ①吸取前面MySQL学习的教训,每天固定学习的内容,学习效果很有提升,但临近开学 ...

  5. PyQt5常用控件及方法(代码段)

    文章目录PyQt5程序基本格式QMainWindow主窗口QLabel标签QTextBrowser文本浏览器QTextEdit文本编辑器QPushButton按键QCheckBox复选框QRadioB ...

  6. java特性 JDK JRE JVM

    1简单性 2可移植性性(跨平台) 3面向对象 4高性能 5分布式 6动态性 7多线程 8安全性JDK:java开发工具 . JRE:JDK:java运行环境 . JVM:JDK:java虚拟机

  7. 用了那么多年的 Master 分支或因种族歧视而成为历史?

    最近真的是活久见了...不知道你是否也有碰到之前Fork过的国外开源项目,最近突然崩了,原因居然是好多项目都把master分支改为了main分支!更可怕的是修改原因居然是涉及种族歧视.用了那么多年的m ...

  8. 数据库语言sql

    数据库语言SQL SQL的形式 交互式SQL 一般DBMS都提供联机交互工具 用户可直接键入SQL命令对数据库进行操作 由DBMS来进行解释 嵌入式SQL 能将SQL语句嵌入到高级语言(宿主语言) 使 ...

  9. Spring Boot 把 Maven 干掉了,拥抱 Gradle!

    在国外某社交网站上有一个关于迁移 Spring Boot 迁移 Maven 至 Gradle 的帖子: 该贴子上也有很多人质疑:Maven 用的好好的,为什么要迁移至 Gradle? 虽然该贴子只是说 ...

  10. phpmyadmin通过慢查询日志getshell连载(二)

    这是phpmyadmin系列渗透思路的第二篇文章,前面一篇文章阐述了通过全局日志getshell,但是还有一个日志可以getshell,那就是本次实验的慢查询日志,操作类似,毕竟实战中多一条路就多一次 ...