My question is regarding How angularJS Module work
I have made a small bunch of code using AngularJS and I cannot understand the following things.
Include angular js but not register module
I included angularJS but never registered with the module. it gives me wrong output.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div>
<p>{{1+2}}</p>
</div>
</body>
include angularJS and register with module
Now, When I registered the angular application with the module. it runs and gives correct output.
var app = angular.module('myapp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp">
<div>
<p>{{1+2}}</p>
</div>
</body>
My questions are...
How angular Works with the module?
Do I need to register it every time with my module?
What is the deep concept of AngularJS module?
What is a Module?
You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
Why?
Most applications have a main method that instantiates and wires together the different parts of the application.
AngularJS apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:
The declarative process is easier to understand.
You can package code as reusable modules.
The modules can be loaded in any order (or even in parallel) because
modules delay execution.
Unit tests only have to load relevant modules, which keeps them fast.
End-to-end tests can use modules to override configuration.
More on angular module
AngularJs is pretty awesome. I just started learning it last Monday. It's not too difficult to pick up basic concepts, but admittedly my only experience so far is to create a bootstrap menu from the results of an API call.
For your specific questions:
You create the app in a separate js file then you load it in your html as a script. For example you create a file in a subdirectory to your index.html, /src/myTestApp.js, then you load it in your index.html using (can't seem to escape to code here... )script src="/src/myTestApp.js">
So basically,
var app = angular.module('myapp', []);
initializes the base AngularJs module which you have called app.
You need to register every module that you would need, but after that you can call it anytime if it's in the same $scope. I think this is called dependency injection.
AngularJs is a JavaScript framework for front-end web development. It does especially well at creating single page applications (SPA). It uses the Model View Controller concept, where you separate the different layers of the code for better management/workflow. It has two-way data binding and a whole bunch of built in html directives that makes it very seamless to pull data from your model, pass it to your controller and display it on your view.
There's many more but these reasons I listed are the main reason I'm getting into it. It exactly fits the specifications and requirements I have for my next project.
Related
I am trying to select framework, which replace our old framework
( middle-sized project )
Our previous project was written with angularJS, so our team write core of this application and distribute it to our clients, some of them has their own frontend teams and they can easily customize core components/controllers via $templateCache mechanism
like so:
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
so these "outsource teams" can fully redefine components ( i mean not only css but layout too )
and include their "custom" components via custom.js files
I am looking for information how we can do same thing.
It looks like using React render props is not suitable for us, because we must have ability to replace any component in runtume just add *.js file
but i'm pretty new in Angular2+ and Vue did these frameworks has such mechanisms?
Vue.js has a pretty well-structured way for components. You can have the html, css and javascript all managed in one place. For basic examples, see the official documentation at vuejs.org
Once having written the components, it's kind of intuitive to use and reuse them in our main html file.
Feel free to try it out!
Also, vue is a modular framework, meaning you don't have to use it's own routing system etc. for getting started with it's template engine. It could even run along side other frameworks.
Until recently I used to develop my js applications with Backbone-js.
Now, I wish to start using Angular-js for the first time.
In my backbone-js apps I used requirejs to load any third party library, it let my app stay organized and clean.
Now, when playing around with angular, I see that in many examples they use <script> to load these modules.
Is there a clean way to load modules without using this <script> tag? and keep angular functioning as expected?
Is it common to use require-js for angularjs apps? or is there any alternative?
Thanks.
You don't need to use require since you have a built in dependency injection mechanism. In order to use 3rd party libraries you need to do 3 things:
Use libraries that are compatible with angular in order be synced with the digest cycle. Most of the common libraries have an angular module that encapsulates their code.
Add these modules to your app. You can explicitly add each library with its own script tag or you can create a bundle of all your libraries and include only it.
Declare the use of that module when you create your app and module.
Angular uses whats called dependency injection to handle modules. Here is the documentation: https://docs.angularjs.org/guide/module
You might want to look at https://github.com/substack/node-browserify#usage
The downside is you'll introduce a "compile phase" to your build process.
The plus is the npm integration.
You still need to follow the "angular way" to inject dependencies, using browserify you'll have little yet nice puses https://blog.codecentric.de/en/2014/08/angularjs-browserify/
Hope it helps.
I'm working on two very similar projects (almost the same).
But the front end of the code is totally weak. I'm refactoring it and was thinking to use the most of the same code ( and specialize if there is a single rule for it ) for both applications and when generating the build on Grunt it generates the desired application...
I wonder if there is a more correct way to do this...
I would like to reuse as much JS and HTML as possible...
Angular JS is a framework, that perfectly divided the code into modules and make each module separate and reusable. Divide your code in modules. Each module having set of Controller, Service, Factory (REST API model), Directive (If any DOM Manipulation), Partials and CSS. Now you can use each Module separately. As in your case you have to use two different backends, make a rootScope property to determine which backend to use. According to the backend to be used configure your Base backend URL, Factories and Service and rest of directives, controllers, HTML and CSS remains the same.
I'm currently using Sails for backend, which comes with an ejs view engine and a templating system which is rather neat. However, setting up Angular on the front end of things will get in the way of these functions.
For instance, I can no longer use templates, because if I have say <html ng-app="myApp"> inside layout.ejs Angular will never initialize.
Same thing should I include any ejs templates.
So what I have done now is created a index.html file inside my assets folder, turned off the Sails routes and layouts, and am purely working with Angular. This will do fine for my current project (except I can't make things as tidy as I'm used to, the boilerplate html need to sit there, etc.) but will it be a problem in other projects, I wonder?
In other words, what am I missing out on by not using ejs? How will I ever be able to get things from my Sails controllers into my views? Or won't I need to?
First this question is WIDE open to interpretation based on all sorts of variables.
If your using your APP simply as JSON delivering API, then in reality you don't need to use the template engine. So the basic premise of your question is valid.
However, their are still plenty of reaons to use the template engine.
For instance, you can still use EJS to setup your default layout and index page for your angular site.
For instance, I can no longer use templates, because if I have say inside layout.ejs Angular will never initialize.
This statement is completely wrong. I use server render templatse for my index page on a SPA in order to use my app version to point to updated assets and template files. That way old template files will not be cached when I update my app. Depending on the app the index page may be the only one to use the template engine as everything else will use static templates. Others I have the server render my templates using the template engine as well (for example: if I want to restrict certain aspects of my templates based on a user role.)
There are other reasons as well. You might try the Google Groups for sails as this is more of an open ended question.
https://groups.google.com/forum/#!forum/sailsjs
If you use Angular for frontend and SailsJs for the backend the best practice is to have two distinct applications which means you don't have use sails to render the views (No EJS mandatory ).
AFAIK SailsJS just need to be used as a REST API while Angular needs to render your views ( you could use http.post get put and delete to comunicate with your api).
Best Regards.
As sails.js is purely backend and Angular.js is purely frontend, they can work together nicely.
All you need to do is place your angular files and logic in
myapp/assets
folder. Assets folder is by default acessible on sails server url.
You can access it as http://localhost:1337/assets/file_name.
As for the ejs, if you are using any javascript framework like angular.js then it is not a requirement as all JSON api will be made in sails framework and angular will get data in JSON format.
I have recently started using angularjs and understand the basics. I have a project separated into separate angularjs apps - for example an account app, a mail app, a news app, etc. Each of these apps are its own angular module.
Now if I were to add a notification app and I wanted that notification app to run on every page in tandem with my other app for that specific page how should I architect my modules to do so?
*My main concern is that angular only allows for one ng-view so I cannot create one for my main app for that page and another for the notifications.
While each app currently only supports one ng-view, you can manually bootstrap as many applications as you want (each with its own ng-view) to different elements in the page with something like this:
angular.bootstrap(document.getElementById('main_container'), ['my-app']);
We combine it with jQuery to be able to know when it's been bootstrapped, and to add in an ng-controller as well:
$(function () {
$('#main_container').attr('ng-controller', 'MainCtrl')
$.when(angular.bootstrap(document.getElementById('main_container'), ['my-app'])).done( function() {
$('body').show()
})
});
If you want to communicate between apps, then you need to do it with Angular's version of window: $window and events or a service as explained here: Share a single service between multiple angular.js apps
As Angular documentation says.
The directive designates the root of the application and is typically
placed at the root of the page....ngApp is the easiest way to
bootstrap an application.
An angular app defines it's module but it can have dependency on other modules too. So your example for notification is a module dependency not a app dependency.
You would create module for notification like
var notificationModule=angular.module('notification', []);
and register multiple sub elements like controllers, directives, filters, services etc.
You would then add this module as dependency into other modules such as
var customerModule=angular.module('customer', ['notification']);
You can register the notification dependency with any module not just the module linked to ng-app.
You html structure should be such that the main view is contained in ng-view and the ancillary view are included using ng-include directive. Since ng-include src property supports data binding you can swap the templates used with ng-include when the main ng-view content changes.