Hello there, how’d you like to learn more about Angular JS? So welcome to the part 2 of the Angular JS series. In this section, I will be talking about,
- Using multiple views
- Using multiple controllers
- 2-way binding
- More new directives
So let’s see how to use multiple views and multiple controllers. I have created 2 new files as angularTutorial2.html and exam2.js.
Now if you want to create multiple different views using the same controller this is how we would do it.
I have created a ng-controller as ‘ctrl1’which generates some random numbers. And add a expression to it. Using the same controller I have defined another view as well.
Then in the exam2.js file inside the app2 controller “‘m going to define both of those. So in this situation we have one controller and 2 views.
Then go back to the html file to make this work. (Create 2 different controllers ad ‘nameCtrl’ and ‘adjCtrl’). So in this situation we have used multiple controllers.
So you may notice that when we keep reloading the page there will be curly brackets popping up for a fraction of a second before we get the results. To remove them you can use ‘ng-cloack’ inside the html tag. And if you have your reference to Angular JS near the bottom section (as in mine) you would also have to define ng-clock in the style tag. It basically says that we don’t want things to be displayed on the screen until everything has been properly compiled and ready to be displayed.
Then go back to the html file. And inside a div tag define a controller referencing the one in the js file (gListCtrl). And like I showed you previously that you will be able to bind data using either expressions or ng-bind. Here I’m going to use expressions, but you can go either way. If you want to use ng-bind the code is,
<span ng-bind=”groceries.length”></span> Groceries to Get</h3>
Then I’m going to create a list of the grocery items. Now I’m going to use ng-repeat to list the rest of the items (Start from two to skip the first item). The ng-if is used to skip the first item in the grocery.
You can also use ng-repeat-start or ng-repeat-end to allow yourself to use ng-repeat on 2 elements rather than just using one element. To structure those I’m going to create a table.
Now I’m going to show you 2-way binding to allow the users to come in and change the data models. Here I’m using ng-model to bind with the first grocery item. So when I change the grocery item the first grocery item in the list will be change momentarily.
Another cool directive that I will use next is ‘ng-switch’, which is going to allow us to conditionally insert or move an element inside of our document.
Now I’m going to talk about Events. So I have created angularTutorial4.html and exam4.js files and in the html file I have added some more stylings.
So that’s it for today. Hope I made some sense in to you on these interesting stuff. I hope to continue doing some more exercises and to discuss more on Angular JS in the next posts.
If you have anything to be clarified you can drop a comment or contact me. Thank You !