whats the simple starter template for angularjs 1.x with webpack? - angularjs

Using vue cli I can get a simple starter template by the command
vue init webpack-simple
Do we have any similar starter template for angularjs 1.x?

There are a lot of angularjs starter templates, mostly given by the community.
You can use yeoman generators for "vainilla templates"
Run from the terminal:
npm install -g grunt-cli bower yo generator-karma generator-angular
mkdir my-awesome-project-name && cd my-awesome-project-name
yo angular
For webpack, I found this starter template or seeder https://github.com/preboot/angularjs-webpack
You can run this:
git clone https://github.com/preboot/angular-webpack.git my-awesome-app
cd my-awesome-app
rm -rf .git/
npm install && npm start

One simple option is using yeoman which is an scanfolding tool. The url is the following.
http://yeoman.io/generators/
hope it helps.

Related

Angular installation

I want to install Angular version 4.* on my windows 7.
I am currently using Angular version 1.6.*
I tried following command
npm install #angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}#next --save
But its not working
Can any one please guide me to install and to create angular 4 project..
Make sure you have node version above 6.9 and npm above 3
Check the version by using node --version and npm --version
Install angular cli using npm install -g #angular/cli
-g installs the angular globally on your system and you just have to run this command only once
Create the angular project using ‘ng new angularprojectname’
Go to that project folder and check the angular version by ‘ng -v’
Upgrade this version to angular 4 by running this command-
For Windows-
npm install #angular/common#next #angular/compiler#next #angular/compiler-cli#next #angular/core#next #angular/forms#next #angular/http#next #angular/platform-browser#next #angular/platform-browser-dynamic#next #angular/platform-server#next #angular/router#next #angular/animations#next --save
For Linux/Mac-
npm install #angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}#next --save
Make sure to upgrade the typescript version by running command-
npm install typescript#2.2.1 --save
Ignore whatever warning it shows up and now check the angular version by ‘ng -v’
The version has changed from 2.2.4 to 4.1.0
You can also check all the info about your angular cli in package.json file.
You just need to install npm -g install angular-cli
And write sudo if you are using mac or ubantu
Then go to directory where you want project and then ng new PROJECTNAME
It will create project
Hope it helps you
I am adding this to update the answer.
If you want to install the latest angular version others answers are for you.
If you want to install a specific version of angular (Get your version number here)
You should use the below command.
npm install -g #angular/cli#VERSION_NUMBER
for example, if you want to install angular 1.4.9 command should be like below
npm install -g #angular/cli#1.4.9
I have also found the same issue while installing.
Please Do check npm and nodejs version and upgrade them.
I'd like to recommend node v6.x.x and npm 4.x.x or higher
There are many ways to structure AngularJS applications. When you begin to upgrade these applications to Angular, some will turn out to be much more easy to work with than others. There are a few key techniques and patterns that you can apply to future proof apps even before you begin the migration.
Follow the AngularJS Style Guide
Using a Module Loader
Migrating to TypeScript
Using Component Directives
Upgrade with ngUpgrade
Or up can follow the official document of Angular
For installing Angular 4 follow below simple steps:
Install node.js and npm(they are required dependencies. npm is automatically installed on installing node.js). You can install it
from here
With the help of npm install angular CLI. Type the following command in your command prompt: npm install -g #angular/cli
If you are still facing some problems you have to install git. You can install it from here
Now to create an angular 4 project using Angular CLI type the following command:
ng new [Project_Name]
This will create an Angualr 4 project.
5.To start the server and get your project up and running type following in command line:
ng serve
Remember you should be inside the project folder before starting the server. Hope this helps.
You have some libraries, Like
angular-material, angular-cdk`
etc...
Add all those and Try.
It will work for sure.
And you will be able to run the project
Install angular cli globally.
npm install -g #angular/cli
Get git pull from repository:-
[https://github.com/blazehub/ng-cli-starter.git]
to get ready made production ready project structure.
If you are looking for latest angular version use this command to install
npm -g install #angular/cli

Is there an AngularJS' auto-generator?

Is there something like:
rails new AngularApp
So that It generates a template of directories and files with routes, config and views?
As #Matti suggested, Yeoman is one of the best Scaffolding tool for AngularJS. In your term, it the best auto-generator for AngularJS.
To Install Yeoman:
$ npm install -g yo
To generate code:
$ yo angular or simply $ yo
More details : Click Here
If you want to generate template for angular i.e angular 4 use angular cli
provide node is installed in your machine
npm install -g #angular/cli
to create new app
ng new yourAppName
cd yourAppName
ng server
hit the url localhost:4200

Adding new dependencies to yeoman angular-fullstack project

I have started working on a new project in node js and I have generated the project using yeoman's angular fullstack generator. And now I would like to add a new bower dependency and a new node dependency. What is the best way to do this? Should I simply add the dependency in bower.json and package.json or should I run a specific command?
You don't need yeoman to install those dependancies for you. Instead, yeoman gives you an environment with everything set up to use tihngs like bower, npm, grunt etc. You can add additional dependencies like you normally would using npm or bower.
for bower (http://bower.io/) -
bower install -S <name-of-your-dependancy>
that command downloads the code for you, and it also adds a reference to it in your bower.json
similar for node (https://www.npmjs.com/) -
npm install -S <name-of-your-dependancy>
use npm packet manager, to install components, like if you want to install cordova, use:
npm install -g cordova
For installing AngularJs, follow the official site guide lines:
https://docs.angularjs.org/misc/started

Any difference between node commands 'cordova ionic' and 'ionic'? Which command need to use?

Is there any difference between node commands npm install -g cordova ionic and npm install -g ionic.
Which command do I need to use to build a ionic project. The documentation given in ionic framework and npmjs are different.
First let's get the clarifications out of the way:
Cordova and ionic are names of packages that you install with the npm install command
The -g flag is used to install the packages globally and be available throughout the system.
Now, to answer your question: The documentation in npmjs for ionic assumes cordova is already installed and provides the command to install ionic-cli
If you try to run
ionic start myapp tabs
without having cordova installed only ionic it will throw a "Package missing" error.
The documentation in the ionicframework website mentions that the cordova package needs to be installed to use the ionic-cli successfully.
Why does ionic need cordova? Well because ionic-cli uses cordoba-cli, and when starting a new ionic project it first initialises a cordova project.
Therefore to start an ionic project, you need npm install -g ionic cordova and then ionic start myapp {templateName}
Hope everything is clear now!

How do I reference angular-latest installed by bower?

I have installed AngularJS using bower, by calling:
$ bower install angular-latest
Now I wonder how to integrate AngularJS into my html file. Apparently, there is neither an angular[.min].js file nor an index.js file as suggested by the bower documentation.
I can't imagine that I am the first person on earth to discover this problem, but unfortunately I did not find any clues on this on Google (but perhaps I only used the wrong terms for searching).
Any idea of how to include AngularJS?
Okay, I found the solution:
$ bower install angular
And everything is fine ...
What you installed with
$ bower install angular-latest
was only the latest source code. You need to actually build AngularJS.
First, you need to install all of the following dependencies if you haven't already:
Git
Node.js
Java
Grunt
Bower
Second, change into the angular.js directory.
Then, install node.js dependencies and bower components:
$ npm install
$ bower install
Finally, you're ready to build your package:
$ grunt package
In the resulting build directory, you'll find
angular.js — The non-minified angular script
angular.min.js — The minified angular script

Resources