Learn
Your First App
Hello AngularJS II
Awesome! You built an AngularJS app. How does it work?
- In app.js, we created a new module named
myApp. A module contains the different components of an AngularJS app. - Then, in index.html we added
<body ng-app="myApp">. Theng-appis called a directive. It tells AngularJS that themyAppmodule will live within the<body>element, termed the application’s scope. In other words, we used theng-appdirective to define the application scope. - In MainController.js we created a new controller named
MainController. A controller manages the app’s data. Here we use the propertytitleto store a string, and attach it to$scope. - Then, in index.html, we added
<div class="main" ng-controller="MainController">. Likeng-app,ng-controlleris a directive that defines the controller scope. This means that properties attached to$scopeinMainControllerbecome available to use within<div class="main">. - Inside
<div class="main">we accessed$scope.titleusing{{ title }}. This is called an expression. Expressions are used to display values on the page. - The value of
titleshowed up when we viewed the app in the browser.
Instructions
1.
Both the controller MainController and the view index.html have access to $scope. This means we can use $scope to communicate between the controller and the view. In the controller, change the value of title to your own string.
2.
Likewise, any new properties attached to $scope will become available to use in the view. In the controller, attach promo to $scope, and set its value to your own string.
3.
In the view under the <h1> element, add an <h2> element and use an expression to display promo on the page.