How to render Scheduler in AngularJS with Gulp package?
Follow the below guidelines to run the AngularJS controls using gulp package.
Step 1: Create a new directory and configure the gulp setup for it using command prompt. To create “gulpfile.js”, make use of the below steps.
- Install Node. (Node JS)
- Install Gulp by using this command “npm install -g gulp”.
- Download the required gulp and its plugins to your project by specifying the plugins that you are about to use in “package.json”.
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-coffee": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect": "latest"
}
}
- Now execute the command “npm install” in command prompt under your project directory, so that the “gulpfile.js” will be created.
Step 3: After creating the above files, the “syncfusion-javascript” package needs to be added into package.json file.
{
"dependencies": {
“angular”: "latest",
"syncfusion-javascript": "specify latest version"
}
}
Step 4: Now create an HTML file “index.html” and render the needed Syncfusion components within it. For example, the Schedule control initialization is as follows:
<div ng-controller=”ScheduleCtrl”>
<ej-schedule id=”Schedule1” e-width=”100%” e-height=”525px”></ej-schedule>
</div>
Step 5: After creating “index.html” file, the scripts and themes path needs to be referred from the corresponding directory.
- The “syncfusion-javascript” packages are available inside the node_modules directory.
Step 6: Finally execute the below commands to run the sample with gulp.
- Install npm packages by using this command “npm install”.
- Ensure that the Gulp packages are installed in your system and if not installed, use this command “npm install gulp -g”.
- Now clean your project directory by using gulp command – “gulp clean”.
- Now copy the scripts and theme references by using gulp command – “gulp copy”.
- Finally run the “gulp dev” command to run the project.
We have prepared the sample in AngularJS with gulp rendering, which can be download from here.