Home >Web Front-end >JS Tutorial >How to write hello world using JavaScript's AngularJS library_AngularJS

How to write hello world using JavaScript's AngularJS library_AngularJS

WBOYOriginal: 2016-05-16 15:53:261159browse

This article shows a hello world code example implemented by the AngularJS framework.

The following are some aspects that you need to focus on when looking at the Hello World example and the following code examples.

ng-app, ng-controller, ng-model directives
Template with two braces

Step 1: Include Angular Javascript

in the e0d5b055b128e8aa6d694e7a88aabe96 section

Include the following code into 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 to import the Angularjs javascript file. You can use the following writing method to get the latest code from the Google-managed library.

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

Step 2: Apply the ng-app directive to the d90fcdb535d6081491edebb07224a674 element

Apply the ng-app directive to the 100db36a723c770d327fc0aef2ce13b1 element as follows. Optionally give the app a name. It can be simply written as ab620c2ce5dd4d9766434fb51c51baab. This directive is used to mark that Angular will recognize it as our The html element of the root element of the application. This gives application developers the freedom to tell Angular that the entire html page, or just a portion of it, should be treated as an Angular application.

<html ng-app="helloApp">

Step 3: Apply the ng-controller directive to the 9c5594a5fc8d2e506f1a8147102c836b element

Apply the ng-controller directive to the 9c5594a5fc8d2e506f1a8147102c836b element. The controller directive can be applied to any element, such as a div. In the code below, "HelloCtrl" is the name of the controller and can be referenced by the controller code placed in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 element.

<body ng-controller="HelloCtrl">

Step 4: Apply the ng-model directive to the input element

You can use the ng-model directive to bind the input to the model.

<input type="text" name="name" ng-model="name"/>

Step 5: Write template code

The following is the template code that displays the model values of the model named "name". Note that the model named "name" is bound to the input in step 4.

Hello {{name}}! How are you doing today&#63;

Step 6: Create controller code in 2934a685527f5cd6bcb20a3dc28499e1

Create the controller code in the script element as shown below. In the code below, "helloApp" is the name of the module defined using the ng-app directive in the 100db36a723c770d327fc0aef2ce13b1 element. The next line of code shows Create a controller with the name "HelloCtrl" defined using the ng-controller directive in the 6c04bd5ca3fcae76e30b72ad730ca86d element. The controller "HelloCtrl" is registered with this module - "helloApp". The last line of code shows the model being linked to $scope Objects are related

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

Please see the complete code here.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Js php implements asynchronous drag and drop upload files_javascript skillsNext article：Js php implements asynchronous drag and drop upload files_javascript skills

See more

How to write hello world using JavaScript's AngularJS library_AngularJS

Related articles