In this video Iftach Bar shows you how to bootstrap a basic Angular app from scratch, initializing an app and a controller.
- [Instructor] I'll start by building a basic Angular app from scratch. There are many ways to start from scratch, like using bower or npm. I'll use the old good fashion way of just downloading the Angular library and include it in my index.html file. I'll open the browser and go into the AngularJS site. I'm going to download AngularJS. Any version will do, as long as it's a 1.x version.
This should be fine. I'm going to be downloading the Angular 1.6.4 version. After downloading the file, I'll have to include it in my Atom project. Let's go into Atom, and let's go into finder, into the Downloads folder, and just drag the angular.min.js file into the 01_01 project we're using. I'll also create a new index.html file by right-clicking the project, New File, and calling the file index.html.
I'm going to use the basic template of Atom in order to build the index.html file. I'm just going to write html, click tab, and it's going to open the basic html template. The title of the course is going to be Scope and Digest. The next thing I want to do is to include the angular.min.js file we just downloaded into the app. To do that, all I need to do is add the script and call it angular.min.js.
Now let's initialize an Angular app in our application. I'm going to create a new file called app.js, and I'm going to initialize a new Angular model called learndigest. I'm going to include the new script I just created in the index.html file. The next thing I'll need to do is to initialize the Angular app in the index.html file. Just including the app.js file is not enough. I'm going to need to write an ng-app attribute on the body element and call it learndigest, which is the same name as we used in the app.js file.
The last thing I'm going to do is to create a new controller. I'm going to go into the app.js file, and I'm going to create a new controller. First, I'm going to grab the Angular model we just created, and I'm going to define a new controller on it. I'm going to call the controller PlaygroundCtrl. I'm going to keep the Playground controller empty for now. We're going to be using it later on down the course.
I am, though, going to create a div here and going to initialize the controller we just created on top of that div. We're just going to add some random text here to see that the application actually works. To make sure everything works, I'm going to open the application in the browser. To do that, I'm not going to need to run any server or anything like that. I'm just going to open the file from finder in the browser.
I'm going to go to finder, to Desktop where my Exercise Files are, to chapter one, and just going to double-click the index.html file. This will open the application in the browser, as we see right now. The last thing I'm going to do is to add some CSS rules in order to make everything look a bit prettier. I'm going to create a new file here called index.css, and I'm going to add some rules on the body.
First, I'm going to make the body in the center by using the margin attribute. Then, I'm going to set the width of the body to 700 pixels. Set the font size, so the text will be a bit bigger. And set some padding again, so things will be still in the center and a bit far from the top of the page. And I'm going to be adding some CSS on input and buttons, just in order to make them look prettier further down the course, even though we're not going to have input and buttons in this specific chapter.
In order to make the CSS count, we have to include it in the index.html file. I'm going to do that really quick. Let's see how it looks. Excellent, looks a bit nicer. Let's summarize what we've done real quick. First, we downloaded the AngularJS file. Then, we included the file script in the index.html file we just created, and we also added an app.js file as well.
Next, we declared an ng-app, and we declared it on the body element. We declared the app also in the app.js file. And the last thing we did is we created an empty controller and used it in the index.html file.
This advanced AngularJS course helps you explore the connected worlds of $scope and the digest cycle. Instructor Iftach Bar explains scope and inheritance, goes behind the scenes of the digest loop, and teaches both manual and automatic data binding approaches. Plus, learn how to integrate external libraries, diagnose performance issues, and debug your applications.
- $scope and controllers
- $scope built-in variables and methods
- $scope prototype inheritance
- Manual data binding with $scope.$watch
- The digest loop
- Get the $scope in the console
- Forcing $digest