Welcome to the AngularJS Introduction Homepage, Guest!
Enter your Name:
Enter your Age:
Enter your Birthday:
The example above is a simple use of AngularJS. The code below is from the example above. You can see how each element is defined with the ng-app, ng-model, and ng-bind attributes. All of the ng-bind elemenets must be within the ng-app element in order to be used within scope. If I had placed the p element with the ng-bind data outside of the ng-app div element, the HTML would not render the information dynamically, and the information would be lost and unreachable. The ng-bind elements must be within the scope of the ng-app element in order for the dynamic results to be displayed. There could be a way around this, but I am writing this introduction and tutorial for AngularJS as I am learning how to use the framework/library. If the information is wrong, I will correct it as I learn the right information. The code below is how you can replicate the Name, Age, and Birthday section with dynamic results. The next section is the code written for the small AngularJS ng-app element above. The div element is defined using the ng-app paramenter, while the name, age, and birthday are input variables being assigned and displayed dynamically as they are being entered. The dynamic behavior will only work within the div with the ng-app parameter, and anything outside the div will result in being out of scope.
<h4>Enter your Name: <input type="text" ng-model="name"></h4>
<h4>Enter your Age: <input type="text" ng-model="age"></h4>
<h4>Enter your Birthday: <input type="text" ng-model="birthday"></h4>
<p><p ng-bind="name"></p> <p ng-bind="age"></p> <p ng-bind="birthday"></p></p>
This is the syncing of the data with the model/view elements.
These are objects that are linked to the model, the link between controller and view.
Built in services provided by AngularJS, for example: the ability to make XMLHttpRequests.
Will select a certain set of items from an array, and return the subset of items as a new array.
A way to mark DOM elements; ng-app, ng-bind, ng-model.
The actual view that is rendered from the information gathered from the controller and model. This can be one file, index.html, or multiple views using partials.
The ability to switch between the different views(templates).
- Model View Controller
A design pattern for a web application; Model, View, and Controller. Angular adheres to a Model-View-ViewModel method, calling it the Model View Whatever method.
- Deep Linking
Will allow a programmer to code the exact state of the application in the URL. This will give the user the ability to restore the URL to the same state.
- Dependency Injection
This is suppose to help the developer to develop, understand, and test easier.
Next, we will take a look at the environments of AngularJS
Just follow the buttons to continue the tutorial, Guest