An introduction to AngularJS
When I came across AngularJS a couple weeks ago, I was intrigued at first. By the time I had worked through the set of tutorials available on the AngularJS website, I was thrilled to have found this framework.
What is AngularJS? AngularJS is the (relatively) new kid on the coding block. To quote from their website it is “a structural framework for dynamic web apps” which is especially well-suited for building one-page web apps, although it’s certainly not limited to that.
Developed in 2009 by Miško Hevery and Adam Abrons — both Google employees at that time — it is entirely JavaScript and entirely client-side, so anywhere JavaScript can run, AngularJS can run. It’s also small: compressed and minified it’s less than 29 kb. And it’s open source under the MIT license. You can even use the logo, available under the Creative Commons Attribution-ShareAlike 3.0 Unported License.
According to Wikipedia the goal of Angular “is to augment browser-based applications with model–view–controller (MVC) capability” and it does just that, providing a binding/MVC framework. That’s two-way binding, mind you. Delicious. With a structure as simple as {{ my data }}, you bind data to your page. The $scope service detects changes to the model and modifies HTML expressions in the view by way of controllers. Working in the other direction, changes to the view are reflected in the model. This removes the need for the vast majority of data-centric DOM manipulations many of us, myself included, take for granted when working with a library like jQuery.
Angular runs right out of the box with no library dependencies, although it can be extended with the many modules that are available, and of course you can build your own to fit your specific needs. Being pure JavaScript, it also has the benefit of being server-agnostic.
Being accustomed to a powerful library like jQuery, it’s easy to want to mix it in to do things Angular can already do. Recognizing this potential pitfall, the developers have this to say: “If you’re struggling to break the habit, consider removing jQuery from your app. Really. Angular has the $http service and powerful directives that make it almost always unnecessary.” One thing is for sure, if you stick to Angular, the jQuery loops and explicit back-and-forth with the server will be absent from your code, since Angular provides such a succinct and clean method of achieving the same things.
Directives
Angular uses directives to plug its action into the page. Directives, all prefaced with ng-, are placed in html attributes.
Some common directives that come pre-built with Angular are:
ng-app: this is essentially the initial entry point of Angular to the page. It tells Angular where it gets to act. is all it takes to define a page as an Angular application.
ng-bind: changes the text of an element to the value of an expression.
will display the value of ‘name’ inside the span. Any changes to ‘name’ are reflected instantly in the DOM anywhere the variable is used.
ng-controller: specifies the JavaScript class for the given action. Controllers are typically kept in external .js files.
ng-repeat: creates the very clean loop structures in your page.
- {{item.description}}
effortlessly loops through each item in the collection.
I haven’t used them yet myself, but I have read that creating custom directives can be a tricky issue, something that takes some time to wrap your head around. Angular offers a video to help clarify the concept.
Some sample code
As mentioned before, the ng-app directive in the tag sets the stage for Angular to run in the page.
Add
Anyone can join.
Anyone can contribute.
Anyone can become informed about their world.
"United We Stand" Click Here To Create Your Personal Citizen Journalist Account Today, Be Sure To Invite Your Friends.
Please Help Support BeforeitsNews by trying our Natural Health Products below!
Order by Phone at 888-809-8385 or online at https://mitocopper.com M - F 9am to 5pm EST
Order by Phone at 866-388-7003 or online at https://www.herbanomic.com M - F 9am to 5pm EST
Order by Phone at 866-388-7003 or online at https://www.herbanomics.com M - F 9am to 5pm EST
Humic & Fulvic Trace Minerals Complex - Nature's most important supplement! Vivid Dreams again!
HNEX HydroNano EXtracellular Water - Improve immune system health and reduce inflammation.
Ultimate Clinical Potency Curcumin - Natural pain relief, reduce inflammation and so much more.
MitoCopper - Bioavailable Copper destroys pathogens and gives you more energy. (See Blood Video)
Oxy Powder - Natural Colon Cleanser! Cleans out toxic buildup with oxygen!
Nascent Iodine - Promotes detoxification, mental focus and thyroid health.
Smart Meter Cover - Reduces Smart Meter radiation by 96%! (See Video).