There are 2 things available in angular :
1.angular cli
2.angularjs
please describe briefly. thanks
Angular-cli a command line interface. and it helps to add new components, directives, and services, from the command line;
it builds application based on your input. you can add code, test cases via command itself...
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your ... you need angularjs library to develop application
Angular-CLI is a TOOL to create your angular 2 application. It provides commands to generate code such as components, services and directives to make angular 2 development easier to the developer. It also allows you to build your application and serve your application as you are developing.
AngularJS : Is the famous JavaScript based framework.
Resume : In general we install Angular-CLI globally to help us in initialization or modification of our Angular projects
In a very simple words,
Angular CLI is a command line interface for writing or easily setting/building up an angular application.
Its just like building a java application from a simple notepad (even though we have other IDEs to help)
Angular js - is a older version of Angular (version 1.x) which is a open-source JavaScript-based front-end web application framework.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.It controlls the code to what it actually to do...
Angular CLI is "Command Line Interface".it needs command to run and perform any operations and it is mandatory for angular 2 and not for angular 1.
The CLI is used to start an Angular 2 application, and add new components, directives, and services, from the command line; it builds application “scaffolding” based on your input. It lets you add code, and unit tests, to an application quickly. Afterward, you fill in the actual business code.
The quick start is just a pre-coded application to give you an idea of what you can do with Angular 2 without having to write any code of you own.
Angualrjs- is nothing but just angular package which you can install in your system for further development.
Angular-cli- comes up with additional feature to make developer life easy it basically create a boilerplate code for you
for ex: structure of your project and you want to add ant component class or service class in project so you can point to your directory and run this command
"ng generate service [name]" it will automatically create a service class for you with initial configuration.
Related
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.
I'm wondering, is it possible to create a liferay7.0 portlet based on angular(2, angular material v1.1.1) and typescripting.
I know its possible to load (for example) Angular 1.4 lib and create a portlet with plain javascript/angular code
source: https://web.liferay.com/web/sampsa.sohlman/blog/-/blogs/trying-the-angularjs-with-liferay
What i would like to achieve is to create a portlet based on nodejs packages. and to compile it with gulp or something to a war file.
Its Open for discussion.
Possible ways i can see, irrespective of Angular 2 & More focused on Single Page Application In General
Liferay 7 Provides ES6 Support. Your write your ES6 code & Then transpile it & install it as a module. Gradle in Liferay IDE has a option for transpilation & import is a seperate package, which can be used through out all modules in the OSGI Container.
Liferay 7 Introduced Metal JS. Metal JS has template support for SOY & JSX. Again it has same process, write ES6 Code, transpile it , install the module & Use it.
When explored liferay source code it uses babel & not typescript. there are files with extension .es.js. & Liferay uses AMD Module loader, so there needs to be a task for typescript & AMD Loader, which then can be passed. Such task needs to be created & Then loading the module can be done by something like this
require('my-dialog', function(myDialog) {
// your code here
}, function(error) {
console.error(error);
});
Reference :- https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/liferay-amd-module-loader
Liferay introduced senna JS. Again its es6 transpiled file, where corresponding to each route we define a page, In that page we can keep a component to be loaded.
Definitively you can integrate Liferay with Angular. Currently exists an official and functional example in:
https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/angular-npm-portlet
But my personal recommendation is don't merge in the same page an Angular portlet with an not Angular portlet.
Integrating java based portals with angular is very complicated. Liferay is shipped with AlloyUi. There are side effects for using multiple JS libraries together such as AlloyUI with Angularjs.
Side effects usually manifests themselves in higher load times and possible conflicts. A single angular app protlet is required for every page containing an angular portlet. Once two instances of the same angular portlet are dropped on a page, this will lead to a conflict unless everything is namespaced (<div ng-app="myapp"> ==> <div id="myapp<portlet:namespace/>">).
It is not possible to define URLs in advance as in classic application development with angularjs. Liferay portal uses its own System-generated URLs so generated tags are needed(portlet:defineObjects, portlet:resourceURL ...) to create:
<URLs(portlet:resourceURL id="config"
var="config">/portlet:resourceURL>
<script> var urlConfig = '${config}'; </script>)
and these tags will not be available in javascript file since the javascript loads first.
This end up complicating development with angularjs and URLs handling issues are frequently encountered. A lot of workaround code is required to integrate portal URLs into angular since angular also controls URLS. And this is basically a try to integrate two directly competing technologies.
A compromise between AlloyUI and Angular must be developed, which will cause more dilemma than provide any actual benefit.
To be short, technological agnosticism sounds great in theory, but it practically does not work that well and it has more complications and disadvantages than actual benefits.
If you believe that developing then integrating a standalone web application into a portal can solve the problem, then this should be looked again because login credentials cannot be shared with the embedded application. In this case liferay has no utility.
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
I would like to build a complicated web component that:
I Can use in my legacy web site (or any other site)
It can be used weather my web site is built with Angular/Angular2/React/Jquery etc...
I can use any technology to build it Angular/Angular2/React etc...
Avoid dependencies & versioning collisions (i.e my component is built with Angular 1.5.6 and the implementing website has Angular 1.4.7)
Would using NPM module could solve this issue (versioning, depenencies etc..) ?
Edit: (example)
For example i would require my component via npm
which has the dependency (requires) the framework i chose (i.e angular 1.5.6)
in this scenario wouldn't my component code use my dependency from NPM (regardless what the site uses)?
You may use a component built with angular on a legacy site but you must load angular before. You should be aware of name collision you might have with other directories.
If the site is already built with angular 1.x you may just blend your component in, considering that your component is compatible to the angular version the site is using.If it is not, I think react can be possible because it may blend in.
In case the site is built with angular 1.4.7, as you have said, you might need to downgrade your component to be used by 1.4.7. This means that if you're using angular.module(...).component you will need to switch it to directive. Alternatively you may switch the site to work with 1.5 if it is possible. If not, you may go back to react.
If you want to use angular 2.0, you may do so side by side with angular 1.x, however, the legacy application needs to be bootstraped with angular upgrade module, using upgradeAdapter. This means you need to interfere with the application, which you don't want to, if I understand you correctly.
What is a best way to kik start a project of angular and Typescript ?
Should I us the official yo angular and add on it
or is it a good stable generator that will help me with the inertial kikstart
We are currently developing with a friend a Typescript + Angular + Express generator for Yeoman :
https://github.com/NovaeWorkshop/nova
It is still under heavy development but already works and we use it to develop a real production website for a client.
It is a port from a previous great Yeoman generator Bangular where we added Typescript, UI Router and Desktop builds with Electron (Atom shell).
At the moment tests are broken and documentation is not up to date, but it's gonna come back real soon, and we would be happy to have your feedback on it.
Not sure yo is a great tool for scaffolding angular. It wants to put controllers in a controller directory and services in a service directory.
This structure is fine, but there are other structures that may serve you better. There are feature and component structures that group related controllers and services together.
You are going to want to define your services and controllers as classes with Typescript. It is always the best to register your controller with Angular is PascalCase because a unique class instance is returned. Services should be registered as camelCase as only a singleton instance Is returned.
I would recommend looking up Basarat's Angular with Typescript examples and John Papa Angular style guide.