要使用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代码（4）---guava之Immutable(不可变)集合

    Immutable(不可变)集合   一,概述 guava是google的一个库,弥补了java语音的很多方面的不足,很多在java8中已有实现,暂时不展开,Collections是jdk提供的一个工 ...

  2. PAT 害死人不偿命的(3n+1)猜想

    卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 3n+1 )砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 195 ...

  3. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  4. 哪些年，我们玩过的Git

    作者:玩世不恭的Coder公众号:玩世不恭的Coder时间:2020-06-05说明:本文为原创文章,未经允许不可转载,转载前请联系作者 哪些年,我们玩过的Git 前言一.前期工作常用基本概念的理解G ...

  5. layui导出表格的两种方法

    一.不熟悉layui小白使用方法 1.引入如下js文件: 2.编写如下函数: 3.表格ID要与函数取值保持一致即可,再就是自定义一个按钮触发事件 二.引入插件使用方法 1.layui官网下载插件包: ...

  6. css布局中的垂直水平居中对齐

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  7. dubbo traceId透传实现日志链路追踪（基于Filter和RpcContext实现）

    一.要解决什么问题: 使用elk的过程中发现如下问题: 1.无法准确定位一个请求经过了哪些服务 2.多个请求线程的日志交替打印,不利于查看按时间顺序查看一个请求的日志. 二.期望效果 能够查看一个请求 ...

  8. @atcoder - AGC002E@ Candy Piles

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 堆糖果,第 i 堆包含 ai 个糖果. 现在两人进行博 ...

  9. Quartz.Net系列（三）：解读Quartz.Net源码领略设计模式在其中的应用

    1.Builder(建造者)模式 JobBuilder  DateBuilder  其他的Builder(TriggerBuilder.SchedulerBuilder等) 2.抽象工厂模式 ISch ...

  10. RocketMQ系列（六）批量发送与过滤

    今天我们再来看看RocketMQ的另外两个小功能,消息的批量发送和过滤.这两个小功能提升了我们使用RocketMQ的效率. 批量发送 以前我们发送消息的时候,都是一个一个的发送,这样效率比较低下.能不 ...