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.
Related
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.
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.
how to access this variable "process.env.endPointAPI" in yeoman
in the factories Services ?
I want to call the API from different server?
To complement my comment to the question and to provide a more detailed answer:
It is necessary more info regarding your code. I guess you are using a yeoman generator with nodejs server side, maybe with expressjs. If that is the case then you need to pass process.env.endPointAPI via express with the help of your templating engine or change your grunt/gulp tasks to include it in a custom angular factory (for example) when you serve/build your app.
This article describes some of these situations step-by-step.
If the options in the article above don't work for you for some reason, and you are using grunt, maybe you can give grunt-ng-constant a try. Basically, it will generate you a custom constant-value utility for Angular. Once injected in your app module you can access those values from your controllers for example.
I really like yeoman angular fullstack organization
client/app/myroute/myroute.js
client/app/myroute/myroute.controller.js
client/app/myroute/myroute.controller.spec.js
client/app/myroute/myroute.html
client/app/myroute/myroute.scss
Everything is in the same folder and it's easy to specify specific stylesheet codes.
My problem is I need to provide just an HTML static website, so yeoman angular generator seems to be more "appropriated". However it used an old fashioned organization. All controllers and all view in specific folders.
Do you know if it's possible to have the same kind of organisation in yeoman angular generator or use yeoman angular fullstack genrator without the server side ?
Thanks you in advance ;)
I think the generator-cg-angular is exactly what you want.
https://github.com/cgross/generator-cg-angular